CSS :在伪元素在 Safari 中不起作用之后
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21057154/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
:after pseudo element not working in Safari
提问by absynthe minded web smith
I have a styled sentence with dynamic text. Sometimes the text is too long, and pushes the anchor at the end outside its box. I want the text to wrap after the span.price-difference, but the anchor button to be positioned against the right side of the p.
我有一个带有动态文本的样式句子。有时文本太长，会将末尾的锚点推到框外。我希望文本在 之后换行span.price-difference，但锚按钮位于p.
I added an :afterpseudo element to .price-difference. I've got it set content: ''and display: block. Works in FF, Chrome, IE (including IE8, which I have to support), but not Safari.
我添加了一个:after伪元素到.price-difference. 我已经把它设成content: ''和display: block。适用于 FF、Chrome、IE（包括 IE8，我必须支持），但不适用于 Safari。
There is an easy answer, wrapping the text following .price-differencewith another span, and set it to block, but changing the HTML is a hassle, requiring a backend developer to make changes to a JSP file, and I'm hoping to avoid that. Looking for a CSS only solution, if it exists.
有一个简单的答案，将后面的文本.price-difference用另一个包装起来span，并将其设置为block，但是更改 HTML 很麻烦，需要后端开发人员对 JSP 文件进行更改，我希望避免这种情况。寻找仅 CSS 的解决方案（如果存在）。
<p class="upsell"> Upgrade To
<span class="stateroom-upgrade"> Concierge Class </span>
for an additional
<span class="price-difference">.14 USD </span>
per person per day
<a href="" class="ccButtonNew"><span>View Upgrades</span></a>
</p>
The CSS
CSS
.upsell {
background: none repeat scroll 0px 0px #FAFAFA;
border-top: 2px dashed #E8E8E8;
color: #666;
display: block;
font-size: 11.5px;
font-weight: 600;
margin: auto 19px 5px;
padding: 8px 0px 8px 8px;
position: relative;
text-transform: none;
white-space: nowrap;
width: 560px;
}
.upsell .price-difference {
color: #0C82C4;
font-size: 15px;
font-weight: 700;
margin-left: 5px;
display: inline-block;
}
.stateroom .upsell .price-difference::after {
content: "";
display: block;
}
.upsell .ccButtonNew {
position: absolute;
right: 10px;
top: 17px;
}
The pelement has white-space: nowrapset on it, but when I turn it off, the problem doesn't go away.
该p元素已white-space: nowrap设置就可以了，但是当我把它关掉，这个问题不会消失。
I think it's related to the following link, but my situation isn't the same. In that question, the asker put a block level element divinside a p, which only takes inline elements. I have an inline element, span, inside the p. This shouldwork.
我认为这与以下链接有关，但我的情况不一样。在这个问题，提问者把一个块级元素div内的p，其只需要内嵌元素。我span在p. 这应该有效。
:after pseudo-element working in FF, but not Safari or Chrome
采纳答案by Elemenofi
.stateroom .upsell .price-difference:after {
content: "";
display: block;
position: absolute;
width: 30px;
border-top: 1px solid #000; /* placeholder border */
}
try adding a position to the after's css rules. i had a similar situation in which the after pseudo wouldn't display in old versions of safari but worked properly in all other browsers. I fixed adding a position rule to the css.
尝试在 after 的 css 规则中添加一个位置。我遇到了类似的情况，其中 after 伪不会在旧版本的 safari 中显示，但在所有其他浏览器中正常工作。我修复了向 css 添加位置规则的问题。
Hope this hepls.
希望这有帮助。
