Pseudoelementul after

Pseudoelementul after inserează text după element. Este folosit doar împreună cu proprietatea content, care stabilește textul care trebuie inserat.

Sintaxă

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

Exemplu

Să facem astfel încât la trecerea cursorului peste li în capătul său să fie inserat textul:

<ul>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
</ul>

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

Exemplu

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

<ul>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
	<li>elementul listei</li>
</ul>

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

Veți și

pseudoelementul before,
care face inserarea înaintea textului tag-ului
funcția attr,
care obține valoarea atributului tag-ului
proprietatea counter-increment,
care stabilește numerotarea automată