: после псевдоэлемента, не работающего в Safari

У меня есть стилизованное предложение с динамическим текстом. Иногда текст слишком длинный и выталкивает якорь в конец за его пределами. Я хочу, чтобы текст обернулся после span.price-difference, но кнопка привязки была расположена напротив правой части p.

Я добавил псевдоним :after в .price-difference. У меня установлено значение 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 внутри a p, который принимает только встроенные элементы. У меня есть встроенный элемент span внутри p. Это должно работать.

: после псевдоэлемента, работающего в FF, но не в Safari или Chrome

Ответ 1