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 (:).
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::beforeo::aftercon la sintaxis de pseudoclase::beforey: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">
