Pseudoelementos CSS

Formas de seleccionar aspectos inexistentes en el 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», 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.

Pseudoelementos

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

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

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
"..." Añade el contenido de texto indicado. content: "Contenido:";
attr(atributo) Añade el valor del atributo HTML indicado. content: attr(href);
url(...) Añade la imagen indicada en la URL. content: url(icon.png);
Añade un gradiente del tamaño indicado. content: linear-gradient(red, blue);
Define un contador CSS para mostrar. content: counter(item);

Ten en cuenta que la propiedad content sólo funciona dentro de los pseudoelementos ::before y ::after.

El pseudoelemento ::before

Por otro lado, los pseudoelementos ::before y ::after permiten hacer referencia a «justo antes del elemento» y «justo después del elemento», respectivamente. Se trata de un pseudoelemento que se escribe de forma posterior a la clave o elemento en cuestión, precedido por doble : y que, por ejemplo, ::before se encargará de añadir contenido antes del inicio de la etiqueta de apertura.

De esta forma, podremos generar información (usualmente con fines decorativos) que no existe en el HTML, pero que por circunstancias de diseño sería lo apropiado colocar en el código CSS:

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

El pseudoelemento ::after

De la misma forma, tenemos el pseudoelemento ::after, que permitirá añadir contenido después de la etiqueta de cierre en cuestión. El código correspondiente sería el siguiente:

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

Los ejemplos anteriores unidos, permitirían insertar 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.

La función attr()

Es interesante recalcar la utilidad de la función CSS 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 de código CSS, realiza una búsqueda de elementos que sean enlaces <a>, y posteriormente (::after) muestra un contenido de texto donde, envuelto entre paréntesis, escribe el contenido del atributo href del enlace tratado. 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.

Otros pseudoelementos

Aunque ::before y ::after suelen ser los ejemplos de pseudoelementos más frecuentes, existen muchos otros pseudoelementos. Veamos cuales existen y profundicemos en ellos:

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.
::marker Aplica estilos a los elementos de cada ítem de una lista.
::backdrop Aplica estilos al fondo exterior de un elemento (sin que afecte a este).
::placeholder Aplica estilos a los textos de sugerencia de los campos <input>.
::selection Aplica estilos al fragmento de texto seleccionado por el usuario.

Expliquemos algunos de estos pseudoelementos.

El pseudoelemento ::first-letter

Este pseudoelemento, como su propio nombre indica, permite dar estilo a la primera letra del texto indicado. Así podremos recrear el efecto clásico de los cuentos o algunas obras, donde la primera letra se establece mucho más grande que el resto del texto y con una tipografía decorativa.

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

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

Observa el posible resultado:

First-letter y First-line en CSS

El pseudoelemento ::first-line

Por otro lado, el pseudoelemento ::first-line es muy útil para aplicar un estilo solamente a la primera línea del texto indicado. Puede ser interesante si queremos cambiar algún detalle, pero que afecte exclusivamente a la primera línea, independientemente del tamaño que tenga (lo calcula el navegador).

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

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

Obviamente, se puede aplicar a otros elementos o clases en el selector de CSS, en este caso lo hemos hecho a un elemento de párrafo <p>, ya que se trata de un párrafo de texto.

El pseudoelemento ::marker

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.

El pseudoelemento ::backdrop

El pseudoelemento ::backdrop nos permite desenfocar el fondo de un elemento para darle más protagonismo al que está en primer plano, como se suele hacer con algunos diálogos o mensajes modales, que comunican una información y hay que prestarle atención y poner el foco en ellos.

En este caso, ::backdrop es un pseudoelemento que aplicará los estilos al fondo, sin que afecte al elemento del primer plano. Habitualmente, suele ser utilizado para poner en escala de grises el fondo, utilizar la propiedad backdrop-filter con el valor blur(2px), o algo similar, donde se le reste importancia al fondo y el usuario se centre en el mensaje o la información de primer plano.

El pseudoelemento ::placeholder

Mediante el pseudoelemento ::placeholder podemos dar estilos particulares a los elementos <input> que tienen el atributo placeholder definido. El atributo placeholder sirve para indicar una sugerencia o mensaje de ayuda o de información con la finalidad de ese campo de texto, normalmente una ayuda de lo que deben escribir o similar.

Con ::placeholder podremos cambiar este color, por ejemplo, que suele ser un gris apagado por defecto.

El pseudoelemento ::selection

Cuando marcamos un fragmento de texto, el navegador suele aplicar un color de fondo que depende del sistema operativo, del tema, o similar. Al igual que ocurre con la propiedad accent-color, es posible que queramos aprovechar esto para definir un color que tengan sentido con los colores corporativos de la marca, página o similar, por lo que podríamos cambiarlo haciendo uso del pseudoelemento ::selection.

Tabla de contenidos