：伪元素在Safari中不工作后

我有一个带动态文本的样式化句子。有时文本太长，并推动锚点在盒子外部的末端。我想让文字在span.price-difference之后进行换行，但是要将按钮定位在p的右侧。：伪元素在Safari中不工作后

我在.price-difference上添加了一个:after伪元素。我已经设置了content: ''和display: block。适用于FF，Chrome，IE（包括我必须支持的IE8），但不适用于Safari。

有一个简单的答案，包装与其他span以下.price-difference文本，并将其设置为block，但改变HTML是一件麻烦事，需要一个后端开发人员修改JSP文件，并且我希望避免这种情况。寻找只有CSS的解决方案，如果它存在。

<p class="upsell"> Upgrade To 
    <span class="stateroom-upgrade"> Concierge Class </span> 
    for an additional 
    <span class="price-difference">$7.14 USD </span> 
    per person per day 
    <a href="" class="ccButtonNew"><span>View Upgrades</span></a> 
</p>

的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; 
}

的p元素上有white-space: nowrap集，但是当我把它关掉，这个问题不会消失。

我认为它与以下链接有关，但我的情况并不相同。在那个问题中，提问者在p中放置了一个块级元素div，它只接受内联元素。我在p内部有一个内联元素span。这应该工作。

:after pseudo-element working in FF, but not Safari or Chrome

来源

2014-01-11 absynthe minded web smith

.stateroom .upsell .price-difference:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 30px; 
    border-top: 1px solid #000; /* placeholder border */ 
}

尝试添加到后的CSS规则的位置。我有一个类似的情况，其中后伪不会显示在老版本的safari中，但在所有其他浏览器中正常工作。我修正了向CSS添加位置规则。

希望能得到这些结果。

来源

2014-04-03 20:22:00 Elemenofi

这不是CSS选择器中的额外冒号，实际上是选择伪元素的正确方法。 Web开发人员不会仅仅因为Internet Explorer 8不支持CSS3语法而只使用CSS2.1语法。 – pentzzsolt

你是对的，谢谢 – Elemenofi

这帮助我正确对齐一个由Safari中的按钮标记中的伪元素组成的纯css箭头（准确地说是iPhone 5）。使用边距和左边的属性，我能够把它做好。 +1 – hardcodepunk

：伪元素在Safari中不工作后

回答

相关问题