после того, как псевдоэлемент не появляется в коде

html css pseudo-element css-content

8736 просмотра

2 ответа

765 Репутация автора

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

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

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

Автор: Ji Mun Источник Размещён: 11.04.2015 12:42

Ответы (2)


19 плюса

170059 Репутация автора

Решение

Это потому, что псевдоэлемент не генерируется, если 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;
}
Автор: Josh Crozier Размещён: 11.04.2015 12:49

8 плюса

10038 Репутация автора

Согласно MDN:

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

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

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

content: ""; // Leave this empty

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

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

Автор: Lucas - Better Coding Academy Размещён: 11.04.2015 12:53
Вопросы из категории :
32x32