:after pseudo element not working in Safari

Question

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.

I added an :after pseudo 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.

There is an easy answer, wrapping the text following .price-difference with 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.

<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>

The 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 p element has white-space: nowrap set on it, but when I turn it off, the problem doesn't go away.

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 div inside a p, which only takes inline elements. I have an inline element, span, inside the p. This should work.

: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 */
}

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.

Hope this hepls.