CSS permite agregar contenido estético a cualquier elemento HTML. Se trata de una funcionalidad que puede llegar a ser un tanto controvertida, ya que la razón de ser del lenguaje CSS es precisamente separar el contenido del diseño.
Con la propiedad CSS content se indica el contenido que se debe aplicar a un elemento HTML. Para ello se debe usar cualquiera de los dos pseudoelementos: ::before y ::after, que como sus nombres indican permiten añadir contenido antes y después del elemento HTML, respectivamente.
Un ejemplo de uso sería añadir el texto «Nota:» al principio de una anotación. Se indica el color rojo para hacerlo más visible.
Código CSS:
.ej1::before {
color: red;
content: "Nota: ";
}
Resultado:
Este párrafo es una nota.
El valor de content se ha indicado entre comillas con un espacio en blanco al final. Así se visualiza separado del resto del texto.
La propiedad content puede tener varios tipos de valores, por lo que la cadena de texto del ejemplo anterior es solo una muestra de su enorme potencial.
| Valor | Descripción |
|---|---|
normal | Valor por defecto. |
none | El contenido no se genera. |
"" o '' | Agrega una cadena de texto. |
url() | URL válida de una imagen. |
attr() | Indica el valor de un atributo. |
counter() | Muestra el valor de un contador. |
counters() | Trabaja con contadores anidados. |
open-quote | Muestra comillas de apertura. |
close-quote | Muestra comillas de cierre. |
no-open-quote | No muestra comillas de apertura. |
no-close-quote | No muestra comillas de cierre. |
El valor por defecto es normal y varía según el pseudoelemento. Por ejemplo, para ::before y ::after se calcula como none, es decir, que el contenido no se genera. Pero para otros pseudoelementos como ::marker, ::placeholder o ::file-selector-button se calcula como initial.
Cadena de texto
Una cadena de texto es un conjunto de uno o más caracteres encerrados entre comillas dobles ("") o comillas simples (''), y es dentro de las comillas que se introduce el texto o los caracteres que se quieran agregar. Por tanto, en estos casos el valor de la propiedad content irá entre comillas dobles o simples.
En un ejemplo anterior se ha agregado el texto «Nota:» como prefijo de un párrafo, usando el pseudoelemento ::before. En cambio, para agregar contenido al final de un elemento HTML se usa el pseudoelemento ::after. En el siguiente ejemplo se agrega una flecha al principio del párrafo y tres puntos suspensivos al final.
Código CSS:
.ej2::before {
color: red;
content: "→ ";
font-weight: bold;
}
.ej2::after {
color: red;
content: "…";
font-weight: bold;
}
Resultado:
Párrafo de ejemplo
Carácter de escape
Si se da el caso de que la cadena de texto que se quiere agregar contiene comillas dobles, se puede englobar con las comillas simples y viceversa. De este modo no se genera ningún conflicto. Pero si hay que usar las dos, se puede utilizar el carácter de escape como prefijo: el símbolo \, llamado barra inversa o invertida.
- Escapar una comilla doble:
\" - Escapar una comilla simple:
\'
Código CSS:
.ej3::before,
.ej3::after {
color: red;
content: "'\"'";
}
Resultado:
Comillas dobles y simples a la vez.
Caracteres Unicode
La propiedad content admite secuencias numéricas de Unicode como valor. Se utiliza introduciendo su código hexadecimal tras haberlo escapado con la barra inversa (\). Por ejemplo, el guión lago — tiene el código 2014, por lo que el valor a usar es "\2014". En estos casos, cualquier otro carácter agregado antes o después de la secuencia numérica no es tomado en cuenta.
Código CSS:
.ej4::before {
color: red;
content: "\2014";
}
Resultado:
Otro párrafo de ejemplo.
Iconos de fuentes
Algunas fuentes incluyen caracteres correspondientes a los logotipos de las redes sociales o iconos de interfaz gráfica, así pueden ser usados mediante este método en el desarrollo web. Para realizarlo, es tan fácil como indicar la familia de la fuente mediante la propiedad font-family en la misma regla CSS.
Código CSS:
.ej5::before {
color: red;
content: "\f002";
font-family: "sigma-icons";
font-size: 0.875em;
padding-right: 8px;
}
Resultado:
Párrafo con icono.
La fuente “sigma-icons” tiene el icono de una lupa en el código Unicode \f002. Debido a que los códigos Unicode no admiten ningún otro carácter, la separación visual se consigue modificando los márgenes, el relleno y la posición. De nada serviría dejar un espacio en blanco al final.
Limitaciones
Las cadenas de texto solo permiten agregar texto básico. Por ejemplo, si se quisiera agregar una etiqueta HTML, el navegador web la mostraría tal y como está escrita, sin interpretarla. Por tanto, los valores "<em>" y "</em>" aplicados a los pseudoelementos ::before y ::after dan el siguiente resultado:
Código CSS:
.ej6::before {
color: red;
content: "<em>";
}
.ej6::after {
color: red;
content: "</em>";
}
Resultado:
Este párrafo es de prueba.
El texto no está en cursiva. Las etiquetas HTML <em> y </em> han sido insertadas como texto en lugar de ser interpretadas.
Imagen externa: la función ‘url()’
Con la función url() como valor se puede indicar la dirección URL de una imagen externa. Debe ser una URL válida, ya sea relativa o absoluta. La sintaxis es idéntica al resto de propiedades CSS que admiten esta función.
En el siguiente ejemplo se muestra el favicono de Recursivos, insertándolo como contenido a través del pseudoelemento ::before.
Código CSS:
.ej7::before {
content: url("/favicon.svg");
padding-right: 8px;
}
Resultado:
Párrafo con una imagen externa.
Valor de atributo: la función ‘attr()’
La función attr() permite obtener el valor de un atributo del elemento HTML en cuestión. Dentro del paréntesis se usa como parámetro el nombre del atributo deseado, por ejemplo: href, title o data-*. Un ejemplo de uso sería mostrar la definición (atributo title) de un acrónimo (elemento <abbr>).
Código CSS:
.ej8::after {
color: red;
content: " (" attr(title) ")";
}
Resultado:
El lenguaje CSS.
Antes y después de la función attr() se ha añadido los signos del paréntesis encerrados como cadena de texto: " (" y ")". Así, el valor del atributo title se visualiza del paréntesis y se entiende mejor.
Contadores
Otra función interesante que se puede usar con la propiedad content es counter(). Con esta función es posible crear contadores personalizados y adaptados según sea conveniente. Se usa juntamente con otras dos propiedades CSS: counter-increment y counter-reset.
Esta función admite dos parámetros: de forma obligatoria se debe indicar el nombre del contador, y de forma opcional se indicará el tipo de contador que se quiere utilizar. Por defecto, el navegador web usará el tipo decimal. Los estilos permitidos son los mismos que los de la propiedad list-style-type para diseñar listas.
Otra función similar a la anterior es counters(), pero en este caso permite trabajar con contadores anidados. Esta función agrega la capacidad de mostrar una cadena de valores de contadores separados por un delimitador.
Un ejemplo de uso puede ser la modificación de la numeración de listas anidadas para conseguir que muestren una numeración de nivel inferior al lado de la numeración principal. Esta es la numeración por defecto:
- Elemento
- Elemento
- Elemento
- Elemento
- Elemento
- Elemento
Código CSS creando un contador para elementos anidados:
.ej9,
.ej9 li ol,
.ej9 li ol li ol {
counter-reset: elemento;
list-style-type: none;
}
.ej9 li:before {
color: red;
content: counters(elemento, '. ') ". ";
counter-increment: elemento;
}
Código HTML:
<ol class="ej9">
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento
<ol>
<li>Elemento</li>
<li>Elemento</li>
</ol>
</li>
</ol>
</li>
</ol>
Resultado:
- Elemento
- Elemento
- Elemento
- Elemento
- Elemento
- Elemento
Cada vez que el navegador se encuentra un elemento con la clase ej9 crea un contador llamado elemento. Por esta razón, los elementos <li> anidados se ven afectados por varios contadores llamados elemento.
Comillas
La propiedad content también puede usarse para mostrar comillas de apertura y de cierre, indicándolas con los pseudoelementos ::before y ::after, respectivamente. No obstante, para este caso específico puede utilizarse la propiedad quotes para definir las comillas que se quiere mostrar. Con esta propiedad se puede indicar varios niveles de comillas.
Cuando se indica las comillas mediante la propiedad quotes, el valor de la propiedad content puede ser una de las siguientes palabras clave: open-quote, close-quote, no-open-quote y no-close-quote, que sirven para mostrar o no mostrar las comillas de apertura y cierre.
Código CSS:
.ej10 q {
quotes: "«" "»" "‹" "›" "'" "'";
}
.ej10 q::before {
color: red;
content: open-quote;
}
.ej10 q::after {
color: red;
content: close-quote;
}
Código HTML:
<p class="ej10">
<q>Párrafo <q>con <q>tres</q> niveles</q> de comillas</q>.
</p>
Resultado:
Párrafo.conde comillastresniveles
Cada vez que el navegador se encuentra un elemento de citación de línea (elemento <q>), añade las comillas según el nivel que corresponda.
Reemplazo de elementos
Cuando se usa la propiedad content directamente sobre un elemento HTML en lugar de usar los pseudoelementos ::before y ::after, el contenido original es reemplazado con el que se haya indicado. Esto sucede con cualquier tipo de imagen declarada, ya sea mediante la función url() o un degradado.
Vamos a generar una imagen sobre un párrafo.
Código CSS:
.ej11 {
content: url("/favicon.svg");
}
Código HTML:
<p class="ej11">Este párrafo desaparecerá.</p>
Resultado:
Este párrafo desaparecerá.
¿Lo ves? El texto del párrafo no aparece por ninguna parte.
Hay que tener en cuenta que al generar contenido sobre elementos regulares, se reemplaza todo el elemento HTML. Esto implica que no se generará el contenido declarado mediante los pseudoelementos ::before y ::after.
