¿Qué son los pseudoelementos?

Formas de seleccionar aspectos inexistentes en el HTML


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 en ciertas situaciones.

¿Qué es un Pseudoelemento?

Los pseudoelementos son una característica de CSS que permite hacer referencias a «comportamientos virtuales no tangibles».

¿Qué significa esto? Dicho de otra forma: Los pseudoelementos permiten 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 (:).

Sintaxis avanzada

La sintaxis con :: no surgió desde los inicios de CSS, por lo que aún hoy en día es posible encontrar fragmentos de código desactualizados que utilizan pseudoelementos como ::before o ::after con la sintaxis de pseudoclase: :before y :after.

Tipos de pseudoelementos

Existen varios tipos de pseudoelementos, que se encuentran organizados en categorías. Puedes encontrarlos en la siguiente tabla:

Pseudoelementos Significado Más información
Contenido generado Información generada desde CSS, sin existir en el HTML. Ver Contenido generado
::before, ::after
Contenido tipográfico Pseudoelementos relacionados con temas de tipografías. Ver Tipográfico
::first-line, ::first-letter
Contenido destacado Pseudoelementos para remarcar o destacar información. Ver Resaltado
::selection, ::target-text, ::spelling-error, ::grammar-error
WebComponents Pseudoelementos relacionados con WebComponents Ver Slots y Parts
::part, ::slotted
View Transition API Pseudoelementos de transición de cambio de página. Ver View Transitions
::view-transition, ::view-transition-group, ::view-transition-image-pair
::view-transition-new, ::view-transition-old
Otros pseudoelementos Pseudoelementos de otras categorías variadas (Ver más abajo)
::marker, ::placeholder, ::file-selector-button

Otros pseudoelementos

Al margen de los pseudoelementos anteriores, explicados en su respectiva sección, nos quedan algunos pseudoelementos sin catalogar.

Vamos a repasarlos:

Pseudoelemento Descripción
::marker Aplica estilos a las marcas o símbolos 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.

Veamos cada uno de ellos.

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.

En este ejemplo se aplica el estilo a los elementos <li> de los ítems de una lista <ul>:

ul li::marker {
  content: "⮞ ";
  color: red;
}
<ul>
  <li>Opción número 1.</li>
  <li>Opción número 2.</li>
  <li>Opción número 3.</li>
  <li>Opción número 4.</li>
  <li>Opción número 5.</li>
</ul>

Ten en cuenta que ciertas propiedades CSS puede que no tengan efecto en este pseudoelemento. Sin embargo, propiedades como font-size, color o content funcionarán correctamente.

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 pseudoelemento debe utilizarse en un diálogo o mensaje modal <dialog>, que comunica información importante y hay que prestarle atención y poner el foco en él.

Veamos un pequeño ejemplo:

dialog::backdrop {
  background: linear-gradient(140deg, indigo, black);
  opacity: 0.9;
}
<p>Texto de la página</p>

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

En este caso, el pseudoelemento ::backdrop aplicará los estilos al contenido de fondo del diálogo, sin que afecte al mismo. También se podría utilizar con una imagen de fondo, junto a la propiedad CSS backdrop-filter con el valor blur(3px) (o similar). En ese caso, se desenfocaría la imagen 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 {
  background: darkred;
  color: white;
  padding: 5px;
}
<input type="text" placeholder="Sugerencia de texto">

Con ::placeholder podremos cambiar este color, por ejemplo, que suele ser un gris apagado por defecto. Ten en cuenta que afectará sólo al mensaje de placeholder, no a las dimensiones del propio elemento <input>.

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.

input::file-selector-button {
  background: indigo;
  color: white;
  padding: 0.5rem 1rem;
  border: 2px solid black;
}
<input type="file" value="Enviar archivo">

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev