Proprietatea content

Proprietatea content permite inserarea de text generat arbitrar în etichete. Se aplică împreună cu pseudoelementele after și before.

Sintaxă

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

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

Să inserăm text suplimentar la începutul și sfârșitul textului din eticheta li:

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

li::before {
	content: '!!!';
}
li::after {
	content: '???';
}

Textului inserat i se pot aplica diferite stiluri. Să colorăm, de exemplu, acest text î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::before {
	color: red;
	content: '!!!';
}
li::after {
	color: green;
	content: '???';
}