Pseudoelementos CSS

Al igual que las pseudoclases, los pseudoelementos son otra de las características de CSS que permiten hacer referencias a «comportamientos virtuales no tangibles», o lo que es lo mismo, se le puede dar estilo a elementos que no existen realmente en el HTML, y que se pueden generar desde CSS.

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ó posteriormente, por lo que aún hoy en día es frecuente ver fragmentos de código con pseudoelementos con la sintaxis de pseudoclase con un solo par de puntos :.

Sintaxis avanzada

Generación de contenido

Dentro de la categoría de los pseudoelementos CSS, como punto central, se encuentra la propiedad content. Esta propiedad se utiliza en selectores que incluyen los pseudoelementos ::before o ::after, para indicar que vamos a crear contenido antes o después del elemento en cuestión:

Propiedad/Pseudoelemento Descripción
content Propiedad para generar contenido. Sólo usable en ::before o ::after.
::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 HTML indicado. content: attr(href);
url(URL) Añade la imagen indicada en la URL. content: url(icon.png);

Por otro lado, los pseudoelementos ::before y ::after permiten hacer referencia a «justo antes del elemento» y «justo después del elemento», respectivamente. Así, se podría generar información (usualmente con fines decorativos) que no existe en el HTML, pero que por circunstancias de diseño sería apropiado colocar:

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 HTML <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 en lugar de generar el contenido textual que le indiquemos, permite recuperar esa información del valor del atributo HTML especificado. 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 que se aplica a una página en el momento de imprimir, 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

Signos de las listas (markers)

Existe también un pseudoelemento para hacer referencias a los signos o marcas de la listas (<ol> o <ul>), en el caso de que queramos que tengan, por ejemplo, un color diferente al del texto de la lista.

Se aplican a los elementos <li> de los ítems de una lista. Veamos un ejemplo:

ul ::marker {
  color: green;
}

Esto mostraría el texto de la lista con el color habitual que tenga (por ejemplo, negro), pero los signos que preceden a cada ítem de la lista, aparecerían en color verde. Hay que tener cuidado, puesto que el soporte de esta característica aún no es muy bueno.

Otros pseudoelementos

Existen otros pseudoelementos quizás menos conocidos:

Pseudoelemento Descripción Soporte
::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. Soporte
::selection Aplica estilos al fragmento de texto seleccionado por el usuario. Soporte
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.