CSS Pseudo Elementos

Pseudo Elementos con CSS

Los Pseudo Elementos nos permiten agregar alguna propiedad a un selector.

Su sintaxis es muy simple.

selector:pseudo-elemento {propiedad:valor}

CSS cuenta con un total de 4 pseudo elementos.

:first-line (primera línea)
:first-letter (primera letra)
:before (antes)
:after (después)

Pseudo Elemento - :first-line

Nos permite agregar alguna propiedad especial a la primera línea de un texto.

Código

p:first-line {text-decoration: underline; color: #FF0000}

Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos.

Resultado

Este tutorial explica sobre los pseudo elementos en CSS, los tipos que hay y algunos de sus usos. Solo la primera línea del párrafo es la que se verá afectada por el pseudo elemento.

:first-line permite solo las siguientes propiedades:

background
clear
color
font
letter-spacing

line-height
text-decoration
text-transform
vertical-align
word-spacing

Pseudo Elemento - :first-letter.

Es usado para agregar una propiedad especial a la primera letra de un texto.

Código

p:first-letter {font-style: italic; font-size: xx-large}

El pseudo elemento :first-letter.......

Resultado

El pseudo elemento :first-letter.......

Observe que el primer carácter del texto es el único afectado por el pseudo elemento.

:first-letter permite solo las siguientes propiedades:

background
border
clear
color
float
font

line-height
margin
padding
text-decoration
text-transform
vertical-align

Pseudo Elemento - :before

Usamos :before cuando queremos poner algún contenido antes que un elemento.

Código

p:before {content: url(logo.gif)}

 Virtualnauta es un sitio dedicado a tutoriales Web.

Resultado

Virtualnauta es un sitio dedicado a tutoriales Web.

Nota: debemos usar la propiedad content para agregar los contenidos deseados.
En este ejemplo, incorporamos el logo de Virtualnauta antes del texto.

Pseudo Elemento - :after

Al igual que :before , :after es usado para ingresar contenidos pero en este caso después del elemento.

Código

p:after {content: url(logo.gif)}

Virtualnauta es un sitio dedicado a tutoriales Web

Resultado

Virtualnauta es un sitio dedicado a tutoriales Web

Nota: debemos usar la propiedad content para agregar los contenidos deseados.
En el ejemplo podemos observar que el logo aparece después del párrafo.

Uso de varios pseudo-elementos juntos

Podemos usar varios pseudo elementos para un mismo selector.

Código

p:first-line {color: #006699}

p:first-letter {font-size: xx-large}

Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.

Resultado

Virtualnauta es un sitio dedicado a tutoriales Web. En este tutorial mostramos los diferentes usos de los pseudo elementos.

En este ejemplo, observamos que tanto la primera línea del texto como la primera letra de la línea han sido afectadas por los pseudo elementos.

Combinación de Pseudo Elementos con clases

Los pseudo elementos pueden ser combinados con clases, como en este ejemplo.

Código

h2.logo:before {content: url(http://www.virtualnauta.com/graficos/v.gif)}

<h2 class="logo">irtualnauta</h2>

Resultado

irtualnauta

En este ejemplo, utilizamos la clase "logo" para señalar en que título vamos a anteponer el logo de Virtualnauta.

Propiedades de los pseudo elementos

Propiedad	Descripción	Ej.
:first-line	Primera línea de un texto.
:first-letter	Primera letra de un texto.
:before	Inserta un contenido antes del elemento. No funciona en IE
:after	Inserta un contenido después del elemento. No funciona en IE