после псевдо-элемента, не появляющегося в коде [дубликат]

На этот вопрос уже есть ответ здесь:

Я пытаюсь использовать псевдоэлемент after для добавления некоторых эффектов на сайт. 

<div class="product-show style-show">
  <ul>
    <li>
      ....
      <div class="...">
        <div class="readMore less">...</div>
        <a href="3" class="readMoreLink" onclick="return false;">Read More</a>
      </div>
      ....
    </li>
  </ul>
</div>

И таблицы стилей: 

.product-show .readMore.less {
   max-height: 200px;
   height: 100%;
   overflow: hidden;
}

.product-show .readMore.less:after {
   background: rgba(255, 255, 255, 0);
   display: block;
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30px;
 }

Я вижу стиль для .продукт-шоу .далее.меньше применяется, но я этого не делаю. смотрите a:: после обозначения в HTML-блоках, когда я изучаю сайт из Chrome (последняя версия) / MacOS. Я читал, что иногда возникают проблемы с более старыми браузерами, но я предположил, что я должен быть в состоянии увидеть, по крайней мере,:: после обозначения псевдо-элемента, если я правильно определяю стиль. Что я делаю не так?

2 13
html css pseudo-element css-content

2 ответа:

Это потому, что псевдо-элемент не генерируется, если значение content опущено (так как начальное/значение по умолчанию равно none).

Укажите значение content, чтобы сгенерировать псевдоэлемент. Достаточно значения ''.

.product-show .readMore.less:after {
    content: '';
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
}
17

Согласно MDN:

Свойство content CSS используется с:: before и:: after псевдо-элементы для создания содержимого в элементе.

Это означает, что если вы не включаете свойство content, элемент :after или :before не будет отображаться полностью.

Добавьте эту строку в свой код: 

content: ""; // Leave this empty

И посмотреть, как это влияет на результат.

Как и Примечание, Вы обычно добавляете текст в свойство content, когда элемент :before или :after используется для отображения текста. Однако во многих случаях вы обнаружите, что просто оставляете его пустым.

9