Descripción
La propiedad content de las hojas de estilo CSS nos permite incluir contenido generado dentro de un elemento HTML mediante CSS. Esta propiedad es especialmente útil cuando trabajamos con pseudo-elementos como :before y :after, permitiéndonos insertar contenido decorativo o informativo sin modificar el HTML.
Sintaxis
content : normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Valores
- close-quote - Inserta una comilla de cierre según el estilo de comillas definido.
- attr(identifier) - Recupera el valor del atributo especificado del elemento HTML.
- no-open-quote - Evita la inserción de una comilla de apertura pero incrementa el nivel de comillas.
- inherit - Hereda el valor de la propiedad content del elemento padre.
- none - No genera ningún contenido.
- uri - Inserta una imagen u otro recurso referenciado por la URI especificada.
- normal - Comportamiento por defecto, equivalente a none para pseudo-elementos.
- counter - Inserta el valor de un contador CSS.
- string - Inserta el texto especificado entre comillas.
- no-close-quote - Evita la inserción de una comilla de cierre pero decrementa el nivel de comillas.
- open-quote - Inserta una comilla de apertura según el estilo de comillas definido.
Ejemplo
Veamos algunos ejemplos de cómo utilizar la propiedad content en CSS para añadir contenido generado a nuestros elementos HTML:
/* Añadir comillas a las citas */
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
/* Añadir un icono antes de enlaces externos */
a[href^="http"]::before {
content: url("external-link.png");
}
/* Mostrar el valor de un atributo */
a[title]::after {
content: " (" attr(title) ")";
}
