:after 伪元素在 Safari 中不起作用

Question

我有一个带有动态文本的样式句子。有时文本太长，并将末尾的锚点推到框外。我希望文本在span.price-difference 之后换行，但锚按钮位于p 的右侧。

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

有一个简单的答案，将.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">$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，但是当我关闭它时，问题并没有消失。

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

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

Answer 1

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

尝试在 after 的 css 规则中添加一个位置。我遇到过类似的情况，after pseudo 不会在旧版本的 safari 中显示，但在所有其他浏览器中都能正常工作。我修复了向 css 添加位置规则的问题。

希望有帮助。