Псевдоэлемент after

Псевдоэлемент 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,
которое задает автоматическую нумерацию