Los pseudoelementos CSS permiten aplicar estilos que añaden elementos (o estilos) que realmente no existen originalmente en el documento HTML.

Al igual que las pseudoclases, los pseudoelementos son otra de las características de CSS que permiten hacer referencias a comportamientos virtuales no tangibles que no tienen relación directa con el contenido del documento en sí.

Recordemos la sintaxis de los pseudoelementos, que está precedida de dos puntos dobles (::) para diferenciarlos de las pseudoclases, las cuales sólo tienen dos puntos (:). No obstante, este cambio surgió a partir de CSS3, por lo que aún es frecuente ver pseudoelementos con la sintaxis de pseudoclase con un solo :.

Sintaxis avanzada

Generación de contenido

Antes de continuar, hay que saber que en este apartado de pseudoelementos CSS es muy común utilizar algunas propiedades interesantes para generar contenido de forma automática, como es el caso de la propiedad content. Esta útil propiedad se combina con los pseudoelementos ::after o ::before, para añadir información antes o después de un elemento:

Pseudoelemento Descripción
::before Aplica los estilos antes del elemento indicado.
::after Aplica los estilos después del elemento indicado.

La propiedad content admite parámetros de diverso tipo, incluso concatenando información mediante espacios. Podemos utilizar tres tipos de contenido:

Valor Descripción Ejemplo
"string" Añade el contenido de texto indicado. content: "Contenido:";
attr(atributo) Añade el valor del atributo indicado. content: attr(href);
url(URL) Añade la imagen indicada en la URL. content: url(http://page.com/icon.png);

Por otro lado, los pseudoelementos ::before y ::after permiten hacer referencia a la ubicación justo antes y justo después (respectivamente) del elemento en cuestión.

q::before {
    content: "«";
    color:#888
}

q::before {
    content: "»";
    color:#888
}

Los ejemplos anteriores insertan el carácter « antes de las citas indicadas con el elemento q y el carácter » al finalizar la misma, ambas de color gris.

Atributos HTML

Es interesante recalcar la utilidad de la expresión attr(), que permite mostrar el valor de un atributo concreto del elemento en la generación del contenido. Veamos un ejemplo para clarificarlo, concatenándolo con texto:

a::after {
    content: " ( " attr(href) " )";
}

Este pequeño ejemplo muestra a continuación de todos los enlaces la URL literalmente, dentro de dos paréntesis. Esto puede ser realmente útil en una página de estilos para documentos impresos, en los cuales se pierde la información del enlace al no ser un medio interactivo.

Truco: También se puede utilizar la expresión url() para añadir una imagen al contenido generado, tal y como lo hacemos en la propiedad background, por ejemplo.

Primera letra y primera línea

También existen pseudoelementos con los que podemos hacer referencia a la primera letra de un texto. Para ello utilizamos el pseudoelemento ::first-letter, así como el pseudoelemento ::first-line si queremos hacer referencia a la primera línea de un texto. De esta forma, podemos dar estilo a esas secciones concretas del texto:

Pseudoelemento Descripción
::first-letter Aplica los estilos en la primera letra del texto.
::first-line Aplica los estilos en la primera línea del texto.

Veamos un ejemplo en acción sobre un párrafo de texto:

p {
    color:#333;
    font-family:Verdana, sans-serif;
    font-size:16px;
}

p::first-letter {
    color:black;
    font-family:'Times New Roman', serif;
    font-size:42px;
}

p::first-line {
    color:#999;
}

Esto puede darnos la posibilidad de dar formato a un texto con ciertas propiedades, como cuentos clásicos:

First-letter y First-line en CSS

Otros pseudoelementos

Existen muchos otros pseudoelementos, sin embargo, su soporte aún no está muy extendido, por lo que no se recomienda utilizarlos hasta saber si serán adoptados en los navegadores (o utilizarlos teniendo en cuenta esto):

Pseudoelemento Descripción
::backdrop Aplica estilos al fondo exterior de la ventana de diálogo mostrada.
::input-placeholder Aplica estilos a los textos de sugerencia de los campos de entrada.
::selection Aplica estilos al fragmento de texto seleccionado por el usuario.
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).