1

При добавлении псевдоэлемента :before (добавил текст) добавленный элемент дублируется. Не могу понять, почему.

.special-grid-home .woocommerce ul.products li.product .price del span {
  font-size: 15px;
  font-weight: 100;
  padding-left: 5px;
  color: #333333;
  line-height: 1.3em;
  font-family: 'Istok Web', sans-serif;
  text-decoration: line-through;
  position: relative;
}

.special-grid-home .woocommerce ul.products li.product .price del span:before {
  content: 'старая цена';
}

Пример

2
  • очевидно в элементе del несколько элементов span
    – Grundy
    1 июл 2017 в 19:21
  • Спасибо, понял. присвоил del:before (без span) и заработало.
    – nirolo1
    1 июл 2017 в 19:44

1 ответ 1

0

Первый раз — перед ценой. Второй — перед знаком рубля.

HTML для цены в вукоммерсе выглядит так:

<span class="woocommerce-Price-amount amount">1999<span class="woocommerce-Price-currencySymbol">р.</span></span>

Получается, что в игре участвуют два вложенных span, и псевдоэлемент добавляется к обоим.

Чтобы этого не происходило, используйте в CSS класс, который стоит у нужного вам span:

.special-grid-home .woocommerce ul.products li.product .price del span.woocommerce-Price-amount:before {
  content: 'старая цена';
}

Или дочерний селектор:

.special-grid-home .woocommerce ul.products li.product .price del > span:before {
  content: 'старая цена';
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.