Pseudoelemento before

Il pseudoelemento before inserisce testo prima di un elemento. Viene utilizzato solo insieme alla proprietà content, che specifica il testo da inserire.

Sintassi

selettore::before {
	content: 'testo';
}

Esempio

Facciamo in modo che quando si passa il mouse su li all'inizio venga inserito il testo:

<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: '!!!';
}

Esempio

Al testo inserito si possono applicare vari stili. Coloriamo, ad esempio, questo testo con un colore:

<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: '!!!';
}

Vedi anche

il pseudoelemento after,
che effettua l'inserimento dopo il testo del tag
la funzione attr,
che ottiene il valore dell'attributo del tag
la proprietà counter-increment,
che imposta la numerazione automatica