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