Dentro de la categoría de los pseudoelementos CSS, y quizás uno de los más conocidos, 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 CSS para generar nuevo contenido. Sólo es 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 CSS que hace referencia al atributo del elemento HTML indicado. |
Vamos a explicar como funciona cada uno de ellos.
La 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 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 pseudoelementos, como por ejemplo ::before y ::after, los cuales explicaremos a continuación. No puede utilizarse en otros selectores.
El 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 ::.
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: red;
}
<p>Y dije <q>Hola, ¿qué tal?</q>, entre susurros.</p>
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. Vamos a completar el código anterior, utilizando también un ::after y añadiendole más estilos a la propia etiqueta:
q::before {
content: "«";
color: red;
}
q::after {
content: "»";
color: red;
}
q {
color: darkred;
font-style: italic;
}
<p>Y dije <q>Hola, ¿qué tal?</q>, entre susurros.</p>
Ahora, como se puede ver en la demo, el ejemplo es mucho más sencillo de entender visualmente, a la vez que posee cierta semántica que lo hace más fácil de entender, no sólo para humanos, sino también para una máquina, sistemas automatizados o desarrolladores que quieran interactuar con la información y comprenderla.
La 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.
Vamos a ampliar el ejemplo anterior, añadiéndole al elemento q un atributo con el autor de ese mensaje:
q::before {
content: "«";
color: red;
}
q::after {
content: "» (" attr(data-author) ")";
color: red;
}
q {
color: darkred;
font-style: italic;
}
<p>Y dije <q data-author="ManzDev">Hola, ¿qué tal?</q>, entre susurros.</p>
En este ejemplo, añadimos el contenido del atributo data-author de las etiquetas <q> para mostrarlo en la página entre paréntesis. Observa que la concatenación (unión) de los carácteres en CSS se hace simplemente con espacios, abriendo y cerrando las comillas para indicar los textos. Esto puede realizarse con cualquier etiqueta y atributo que desees.
El uso de la función attr() podría ser muy útil en ciertos casos, como por ejemplo, en una página que muestra enlaces y el usuario va a imprimir. Podríamos utilizar medios de impresión que apliquen un CSS especial, donde el contenido de los atributos href en las etiquetas <a> sean mostrados, ya que en una impresión no podemos hacer doble clic en los textos subrayados (con enlace):
a[href]::after {
content: "( " attr(href) " )";
padding: 5px;
color: navy;
}
<ul>
<li>Enlace a mi página: <a href="https://manz.dev/">ManzDev</a></li>
<li>Enlace a mi Twitter: <a href="https://twitter.com/Manz">@Manz</a></li>
</ul>
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 propiedadbackground, por ejemplo.
