Псевдоэлемент after вставляет текст после элемента. Используется только совместно со свойством content, которое задает текст, который следует вставить.
Синтаксис
селектор::after {
content: 'текст';
}
Пример
Давайте сделаем так, чтобы по наведению на li в его конец вставился текст:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::after {
content: '!!!';
}
:
Пример
К вставляемому тексту можно применять различные стили. Покрасим, к примеру, этот текст в какой-нибудь цвет:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li:hover::after {
color: red;
content: '!!!';
}
:
Смотрите также
-
псевдоэлемент before,
который делает вставку после текста тега -
функцию attr,
которая получает значение атрибута тега -
свойство counter-increment,
которое задает автоматическую нумерацию