Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (VIII)

9.5. Pseudo-elements

En este vídeo explicamos los pseudoelementos:

Los pseudoelementos permiten modificar el contenido de la página mediante el uso de CSS.

- añadir contenido con ::after y ::before

Podemos añadir contenido delante de la etiqueta con ::before, y detrás con ::after, escribiendo el atributo content y el texto entre comillas, también se puede añadir otro contenido referenciado por una url, por ejemplo, una imagen. Por ejemplo, la siguiente regla añade una imagen delante de las etiquetas p, y añade un texto detrás:

p::before { content: content: url(graficos/orangeball.gif) }
p::after { content: ", añadido detrás con CSS " }  

Al aplicarlo para este fragmento de página:

<h2>Contenido con CSS</h2>
<p>Línea uno</p>
<p>Línea dos</p>

Produce el siguiente resultado, donde vemos el gráfico y el texto añadido:

Como vemos funciona perfectamente pero quizás nos gustaría añadir diferente contenido a cada etiqueta p, para ello podemos combinar y encadenar selectores de la forma: p.primera::after para que se aplique a las etiquetas p con la clase primera.

Puedes ve más pseudoclases y pseudoelementos en el siguiente enlace:

w3cschols