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

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


css safari pseudo-element
person absynthe minded web smith    schedule 11.01.2014    source источник

Ответы (1)


arrow_upward
8
arrow_downward 

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

попробуйте добавить позицию в правила css после. у меня была аналогичная ситуация, когда псевдоним после не отображался в старых версиях сафари, но работал правильно во всех других браузерах. Я исправил добавление правила положения в css.

Надеюсь, это поможет.

person Elemenofi    schedule 03.04.2014
comment
Это не было дополнительным двоеточием в селекторе CSS, это на самом деле правильный способ выбора псевдоэлементов. Веб-разработчики не используют это просто потому, что Internet Explorer 8 не поддерживает синтаксис CSS3, а только синтаксис CSS2.1. - person pentzzsolt; 02.12.2014
comment
Это помогло мне правильно выровнять чистую стрелку css, состоящую из псевдоэлементов, в теге кнопки в Safari (точнее, в iPhone 5). Используя оба поля и левый атрибут, я смог сделать это правильно. +1 - person 6754534367; 25.11.2016
comment
Я только что получил ошибку в Firefox 55. Впервые наткнулся на это, но спасибо! - person Skoua; 21.05.2017