Pseudoelemento before

O pseudoelemento before insere texto antes de um elemento. É usado apenas em conjunto com a propriedade content, que define o texto a ser inserido.

Sintaxe

seletor::before {
	content: 'texto';
}

Exemplo

Vamos fazer com que ao passar o mouse sobre um li, o texto seja inserido no início dele:

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

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

Exemplo

É possível aplicar vários estilos ao texto inserido. Vamos colorir este texto, por exemplo, com alguma cor:

<ul>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
	<li>item da lista</li>
</ul>

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

Veja também

o pseudoelemento after,
que faz a inserção após o texto da tag
a função attr,
que obtém o valor do atributo da tag
a propriedade counter-increment,
que define a numeração automática