Pseudo-elemento before

El pseudo-elemento before inserta texto antes del elemento. Se utiliza únicamente junto con la propiedad content, que define el texto que se debe insertar.

Sintaxis

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

Ejemplo

Hagamos que al pasar el cursor sobre li se inserte texto al principio:

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

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

Ejemplo

Al texto insertado se le pueden aplicar varios estilos. Pintemos, por ejemplo, este texto de algún color:

<ul>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
	<li>elemento de lista</li>
</ul>

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

Véase también

pseudo-elemento after,
que realiza la inserción después del texto de la etiqueta
función attr,
que obtiene el valor del atributo de la etiqueta
propiedad counter-increment,
que define la numeración automática