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

Псевдоэлемент before вставляет текст перед элементом. Используется только совместно со свойством content, которое задает текст, который следует вставить.

Синтаксис

селектор::before {
	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::before {
	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::before {
	color: red;
	content: '!!!';
}

Смотрите также

псевдоэлемент after,
который делает вставку после текста тега
функцию attr,
которая получает значение атрибута тега
свойство counter-increment,
которое задает автоматическую нумерацию