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