Pseudo-elemento after

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

Sintaxis

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

Ejemplo

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

<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::after {
	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::after {
	color: red;
	content: '!!!';
}

Véase también

pseudo-elemento before,
que realiza la inserción antes 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