после того, как псевдоэлемент не появляется в коде
8736 просмотра
2 ответа
Я пытаюсь использовать псевдоэлемент после, чтобы добавить некоторые эффекты на сайт.
<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 Источник Размещён: 12.11.2019 09:53Ответы (2)
19 плюса
Это потому, что псевдоэлемент не генерируется, если 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 плюса
Согласно MDN:
CSS-свойство content используется с псевдоэлементами :: before и :: after для генерации контента в элементе.
Это означает, что если вы не включите content
свойство, элемент :after
or :before
не будет отображаться вообще.
Добавьте эту строку в ваш код:
content: ""; // Leave this empty
И посмотрите, как это влияет на результат.
Как примечание, вы обычно добавляете текст в content
свойство, когда для отображения текста используется элемент :before
или :after
. Однако во многих случаях вы обнаружите, что просто оставляете его пустым.
Вопросы из категории :
- html Определить часовой пояс пользователя
- html Как определить, какой из указанных шрифтов был использован на веб-странице?
- html Как мне дать моим веб-сайтам значок для iPhone?
- html Как отключить автозаполнение браузера в поле веб-формы / теге ввода?
- html Как автоматически изменить размер текстовой области с помощью Prototype?
- css Создание закругленных углов с помощью CSS
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- pseudo-element Могу ли я использовать псевдоэлемент: before или: after в поле ввода?
- pseudo-element CSS: как удалить псевдоэлементы (после, до, ...)
- pseudo-element Можно ли установить порядок размещения псевдоэлементов ниже их родительского элемента?
- pseudo-element Изменение стилей псевдоэлементов CSS с помощью JavaScript
- pseudo-element Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
- css-content Добавление объектов HTML с использованием содержимого CSS
- css-content Выравнивание по вертикали CSS: до и после контента
- css-content Можете ли вы применить ширину к псевдоэлементу: before /: after (content: url (изображение))?
- css-content Что делает пустое значение для содержимого свойства CSS?