Pseudoelementul before

Pseudoelementul before inserează text înaintea elementului. Este utilizat doar împreună cu proprietatea content, care specifică textul care trebuie inserat.

Sintaxă

selector::before {
	content: 'text';
}

Exemplu

Să facem astfel încât la trecerea cursorului peste li să i se insereze text la început:

<ul>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
</ul>

li:hover::before {
	content: '!!!';
}

Exemplu

Textului inserat i se pot aplica diverse stiluri. Să-l colorăm, de exemplu, într-o culoare oarecare:

<ul>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
	<li>element de listă</li>
</ul>

li:hover::before {
	color: red;
	content: '!!!';
}

Vedeți și

pseudoelementul after,
care face inserarea după textul tag-ului
funcția attr,
care obține valoarea atributului tag-ului
proprietatea counter-increment,
care specifică numerotarea automată