Pseudoelementos CSS

Hasta ahora, hemos visto selectores básicos, atributos, combinadores y pseudoclases. Sin embargo, existe una última categoría, un poco más extraña y fuera de lo común, pero que en muchos casos nos puede resultar bastante interesante para dar estilo a ciertos detalles.

¿Qué es un Pseudoelemento?

Los pseudoelementos son una característica de CSS que permite hacer referencias a «comportamientos virtuales no tangibles», dicho de otra forma, seleccionar y dar estilo a elementos que no existen en el HTML, o que no son un simple elemento en sí.

La sintaxis de los pseudoelementos 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 :.

Contenido generado

Dentro de la categoría de los pseudoelementos CSS, como punto central, y quizás la más conocida, se encuentra la propiedad content. Esta propiedad se utiliza en selectores que incluyen los pseudoelementos ::before o ::after (que explicaremos un poco más adelante), y su objetivo es indicar que vamos a crear contenido antes o después del elemento indicado en cuestión.

Veamos un pequeño resumen de los elementos que participan en esta categoría:

Elemento	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.
attr()	Función que hace referencia al atributo HTML indicado.

Vamos a explicar como funciona cada uno de ellos.

Propiedad content

La propiedad content admite parámetros de diverso tipo, incluso concatenando información mediante espacios. Podemos utilizar varios 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 que explicaremos a continuación. No puede utilizarse en otro lugar.

Pseudoelemento ::before

Los pseudoelementos ::before y ::after permiten hacer referencia a «justo antes del elemento» y «justo después del elemento», respectivamente. Además de selectores básicos como clase o id, combinadores, atributos o pseudoclases, puedes añadir un pseudoelemento, precedido por doble :.

En el caso del pseudoelemento ::before, el navegador se encargará de añadir contenido antes del inicio de la etiqueta de apertura del elemento que has seleccionado con el resto del selector:

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

En este caso, estamos añadiendo el texto « justo antes de los elementos <q> que aparezcan en nuestro documento, además de pintarlos de color gris. De esta forma, podemos generar información (usualmente con fines decorativos) que no existe en el HTML, pero que por circunstancias de diseño sería más apropiado colocar en el código CSS.

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.

Función attr()

Es interesante recalcar la utilidad de la función CSS attr(A). Esta función se puede utilizar en la propiedad content para recuperar el valor del atributo HTML especificado en A. Veamos un ejemplo para clarificarlo, concatenándolo con un texto aplicado en la propiedad content:

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 posterior 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 función url() para añadir una imagen al contenido generado, tal y como lo hacemos en la propiedad background, por ejemplo.

Pseudoelementos tipográficos

Aunque ::before y ::after suelen ser los ejemplos de pseudoelementos más frecuentes, existen muchos otros pseudoelementos. Por ejemplo, dentro de una categoría de pseudoelementos tipográficos, podemos encontrar los pseudoelementos ::first-letter o ::first-line:

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.

Pseudoelemento ::first-letter

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

p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  color: #333;
}

p::first-letter {
  font-family: 'Fancy Decorative', serif;
  font-size: 4rem;
  color: black;
}

Un posible resultado de este fragmento de código sería el siguiente:

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: 'Open Sans', sans-serif;
  font-size: 1rem;
  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.

Pseudoelementos de resaltado

Existe una serie de pseudoelementos orientados a la selección o resaltado de texto en un documento HTML mostrado a través de un navegador. Veamos que pseudoelementos tenemos a nuestra disposición:

Pseudoelemento	Descripción
::selection	Aplica estilos al fragmento de texto seleccionado por el usuario.
::target-text	Aplica estilos al fragmento de texto enlazado tras el ancla de la URL.
::spelling-error	Aplica estilos al fragmento de texto resaltado por error ortográfico.
::grammar-error	Aplica estilos al fragmento de texto resaltado por error gramatical.

Pseudoelemento ::selection

Cuando seleccionamos 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 o web, por lo que podríamos cambiarlo haciendo uso del pseudoelemento ::selection:

::selection {
  background: indigo;
  color: white;
}

Pseudoelemento ::target-text

En algunos casos, al crear un enlace a una página, tras el ancla de la URL definida con el carácter #, se puede añadir el fragmento de texto :~:text= seguido del texto, palabra o frase a buscar en la propia página. Al hacer esto, el navegador resaltará esa parte para que sea más sencillo encontrarla.

Esta página suele estar destacada con color de fondo amarillo sobre letras negras, pero podemos personalizarlo a través del pseudoelemento ::target-text:

::target-text {
  background: lime;
  color: black;
}

Ahora, en una URL terminada en #:~:text=ManzDev, todos los textos ManzDev aparecerían resaltados en el color seleccionado por ::target-text.

Pseudoelemento ::spelling-error

El pseudoelemento ::spelling-error nos permite modificar los estilos que se aplican a como se muestra un error ortográfico en el navegador, que normalmente se visualiza con un subrayado ondulado rojo en la palabra o texto afectado.

::spelling-error {
  background: darkred;
  color: white;
}

Pseudoelemento ::grammar-error

Por su parte, el pseudoelemento ::grammar-error es exactamente igual al anterior, sólo que se encarga de señalar los errores gramaticales del texto, y no los ortográficos.

Otros pseudoelementos

Al margen de los anteriores, nos quedan algunos otros pseudoelementos que cabe destacar:

Pseudoelemento	Descripción
::marker	Aplica estilos a los elementos de cada ítem de una lista.
::backdrop	Aplica estilos al fondo exterior de un elemento en primer plano (sin que afecte a este).
::placeholder	Aplica estilos a los textos de sugerencia de los campos <input>.
::file-selector-button	Aplica estilos a los botones de campo <input> de subir archivos.

Pseudoelemento ::marker

El pseudoelemento ::marker sirve para hacer referencias a los signos o marcas de la listas (<ol> o <ul>), en el caso de que queramos que tengan un estilo 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 <ul> con el color habitual que tenga (por ejemplo, negro), pero los signos que preceden a cada ítem de la lista, apareciendo en color verde.

Pseudoelemento ::backdrop

El pseudoelemento ::backdrop nos permite aplicar estilos como oscurecer o desenfocar el fondo detrás de un elemento para darle más protagonismo al elemento que está en primer plano. Este elemento debe ser un diálogo o mensaje modal, que comunica información y hay que prestarle atención y poner el foco en él.

<dialog>Hello!!!</dialog>

<script>
const dialog = document.querySelector("dialog");
dialog.showModal();
</script>

<style>
dialog::backdrop {
  background: black;
  opacity: 0.5;
}
</style>

En este caso, ::backdrop es un pseudoelemento que aplicará los estilos al fondo, sin que afecte al elemento del primer plano. También se podría utilizar junto a la propiedad CSS backdrop-filter con el valor blur(2px) (o algo similar), donde se desenfocará y se le restará importancia al fondo y el usuario se centrará en el mensaje o la información de primer plano.

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.

input::placeholder {
  color: darkred;
}

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

Pseudoelemento ::file-selector-button

El pseudoelemento ::file-selector-button hace referencia al <button> que se incluye dentro de un elemento <input type="file">, o lo que es lo mismo, un botón para enviar ficheros a través de un formulario. De esta forma, podemos personalizar la apariciencia del botón del formulario.