Propiedad content

Ejemplos de uso

La propiedad content es una de las propiedades CSS más poderosas y a la vez más controvertidas. La propiedad content se emplea para generar nuevo contenido de forma dinámica e insertarlo en la página HTML. Como CSS es un lenguaje de hojas de estilos cuyo único propósito es controlar el aspecto o presentación de los contenidos, algunos diseñadores defienden que no es correcto generar nuevos contenidos mediante CSS.

En primer lugar, el estándar CSS 2.1 indica que la propiedad content sólo puede utilizarse en los pseudo-elementos :before y :after. Como su propio nombre indica, estos pseudo-elementos permiten seleccionar (y por tanto modificar) la parte anterior o posterior de un elemento de la página.

El siguiente ejemplo muestra cómo añadir la palabra Capítulo delante del contenido de cada título de sección <h1>:

h1:before {
  content: "Capítulo ";
}

Los pseudo-elementos :before y :after se pueden utilizar sobre cualquier elemento de la página. El siguiente ejemplo añade la palabra Nota: delante de cada párrafo cuya clase CSS sea nota:

p.nota:before {
  content: "Nota: ";
}

Combinando las propiedades content y quotes con los pseudo-elementos :before y :after, se pueden añadir de forma dinámica comillas de apertura y de cierre a todos los elementos <blockquote> de la página:

blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}
blockquote {
  quotes: "«" "»";
}

Los contenidos insertados dinámicamente en un elemento son a todos los efectos parte de ese mismo elemento, por lo que heredan el valor de todas sus propiedades CSS.

Los dos valores más sencillos de la propiedad content son none y normal. En la práctica, estos dos valores tienen el mismo efecto ya que hacen que el pseudo-elemento no se genere.

El siguiente valor que se puede indicar en la propiedad content es una cadena de texto. En el estándar CSS 2.1, una cadena de texto es un conjunto de uno o más caracteres encerrados por las comillas dobles (") o las comillas simples ('). Si la cadena contiene comillas dobles, se encierra con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas simples como dobles, las comillas problemáticas se modifican y se les añade la barra invertida \ por delante:

p:before {
  content: "Contenido generado \"dinámicamente\" mediante CSS. ";
}
#ultimo:after {
  content: " Fin de los 'contenidos' de la página.";
}

Las cadenas de texto sólo permiten incluir texto básico. Si se incluye alguna etiqueta HTML en la cadena de texto, el navegador muestra la etiqueta tal y como está escrita, ya que no las interpreta. Para incluir un salto de línea en el contenido generado, se utiliza el caracter especial \A

El siguiente valor aceptado por la propiedad content es una URL, que suele utilizarse para indicar la URL de una imagen que se quiere añadir de forma dinámica al contenido. La sintaxis es idéntica al resto de URL que se pueden indicar en otras propiedades CSS:

span.especial:after {
  content: url("imagenes/imagen.png");
}

Otros valores que se pueden indicar en la propiedad content son open-quote, close-quote, no-open-quote y no-close-quote. Los dos primeros indican que se debe mostar una comilla de apertura o de cierre respectivamente. Las comillas utilizadas se establecen mediante la propiedad quotes:

blockquote { quotes: "«" "»" '"' '"' }
blockquote:before {
  content: open-quote;
}
blockquote:after {
  content: close-quote;
}

Los valores no-open-quote y no-close-quote se utilizan para no mostrar ninguna comilla en ese elemento, pero incrementando el nivel de anidamiento de las comillas. De esta forma se puede evitar mostrar una comilla en un determinado elemento mientras se mantiene la jerarquía de comillas establecida por la propiedad quotes.

Uno de los valores más avanzados de la propiedad content es attr(), que permite obtener el valor de un atributo del elemento sobre el que se utiliza la propiedad content. En el siguiente ejemplo, se modifican los elementos <abbr> y <acronym> para que muestren entre paréntesis el valor de sus atributos title:

abbr:after, acronym:after {
  content: " (" attr(title) ")"
}

El valor de la propiedad content anterior en realidad es la combinación de tres valores: * Cadena de texto " (", que es el paréntesis de apertura tras el cual se muestra el valor del atributo title. * Atributo title del elemento obtenido mediante attr(title) * Cadena de texto ")", que es el paréntesis de cierre que se muestra detrás del valor del atributo title.

Si el elemento no dispone del atributo solicitado, la función attr(nombre_del_atributo) devuelve una cadena de texto vacía. Utilizando attr() solamente se puede obtener el valor de los atributos del elemento al que se aplica la propiedad content.

La función attr() es muy útil por ejemplo para mostrar la dirección a la que apuntan los enlaces de la página:

a:after {
  content: " (" attr(href) ")";
}

Los últimos valores que se pueden indicar en la propiedad content son los contadores creados con las propiedades counter-increment y counter-reset. Los contadores más sencillos se muestran con la función counter(nombre_del_contador). El siguiente ejemplo crea dos contadores llamado capitulo y seccion para utilizarlos con los elementos <h1> y <h2>:

body {
  counter-reset: capitulo;
}
h1 {
  counter-reset: seccion;
}
h1:before {
  content: "Capítulo " counter(capitulo) ". ";
  counter-increment: capitulo;
}
h2:before {
  content: counter(capitulo) "." counter(seccion) " ";
  counter-increment: seccion;
}

En el ejemplo anterior, se crea e inicializa su valor a 0 un contador llamado capitulo cuando se encuentre el elemento <body>, es decir, al comienzo de la página. Además, se crea e inicializa su valor a 0 otro contador llamado seccion cada vez que se encuentra un elemento <h1> en la página.

Posteriormente, se añade de forma dinámica a los elementos <h1> y <h2> el contenido generado mediante los contadores. Los elementos <h1> utilizan el contador capitulo y lo incrementan en una unidad cada vez que lo utilizan. Los elementos <h2> utilizan los dos contadores para generar un contenido que muestra su numeración completa. Además, los elementos <h2> actualizan el valor del contador seccion.

Cuando un mismo elemento inicializa/actualiza un contador y lo utiliza en la propiedad content, en primer lugar se inicializa/actualiza y después, el valor actualizado es el que se utiliza mediante counter().

Además de mostrar el valor de un contador básico, la función counter() permite indicar el estilo con el que se muestra el valor del contador. La lista de estilos permitidos son los mismos que los de la propiedad list-style-type.

El siguiente ejemplo modifica el anterior para mostrar el valor de los contadores en números romanos:

body {
  counter-reset: capitulo;
}
h1 {
  counter-reset: seccion;
}
h1:before {
  content: "Capítulo " counter(capitulo, upper-roman) ". ";
  counter-increment: capitulo;
}
h2:before {
  content: counter(capitulo, upper-roman) "." counter(seccion, upper-roman) " ";
  counter-increment: seccion;
}

Los estilos de los contadores también se pueden emplear para no mostrar el valor de los contadores en algunos elementos:

p {
  counter-increment: parrafos;
}
p:before {
  content: counter(parrafos);
}
#especial p:before {
  content: counter(parrafos, none);
}

Aunque el valor de los contadores siempre es númerico, también es pueden emplear estilos gráficos como square, disc o circle:

h2 {
  counter-increment: seccion;
}
h2:before {
  content: counter(seccion, disc);
}

La función counter() solamente muestra el valor de un contador. Por su parte, la función counters() se utiliza para mostrar de forma simultánea el valor de todos los contadores asociados con el elemento. Como se explica en la descripción de las propiedades counter-increment y counter-reset, los contadores se pueden anidar y un mismo elemento puede tener asociados varios contadores diferentes con el mismo nombre.

El siguiente ejemplo muestra unas reglas CSS que crean un contador para los elementos de una lista <ol>:

ol {
  counter-reset: elemento;
  list-style-type: none;
}
li:before {
  content: counter(elemento) ". ";
  counter-increment: elemento;
}

Si se considera el siguiente código HTML:

<ol>
  <li>Elemento</li>
  <li>Elemento</li>
  <li>Elemento
    <ol>
        <li>Elemento</li>
        <li>Elemento
          <ol>
            <li>Elemento</li>
            <li>Elemento</li>
            <li>Elemento</li>
          </ol>
        </li>
        <li>Elemento</li>
    </ol>
  </li>
  <li>Elemento</li>
</ol>

Si se aplican las reglas CSS al código HTML anterior, se crean tres contadores diferentes con el mismo nombre (elemento) y el resultado es el que muestra la siguiente imagen:

Sin embargo, si se utiliza la función counters() en las reglas CSS anteriores:

ol {
  counter-reset: elemento;
  list-style-type: none;
}
li:before {
  content: counters(elemento, '. ') ". ";
  counter-increment: elemento;
}

Ahora, el aspecto que muestra la lista de elementos es el de la siguiente imagen:

En el ejemplo anterior, cada vez que se encuentra un elemento <ol> se crea un contador llamado elemento. Por este motivo, los elementos <li> anidados se ven afectados por varios contadores llamados elemento. La función counter() sólo muestra el valor del contador que afecta más directamente al elemento, mientras que la función counters() muestra todos los contadores empezando desde el más externo hasta llegar al más interno.

El segundo argumento de la función counters() es una cadena de texto que se emplea para separar los valores de los diferentes contadores. CSS 2.1 no permite utilizar diferentes separadores para cada nivel jerárquico.

Por último, la función counters() también permite indicar el estilo con el que se muestra el valor de los contadores. De esta forma, el siguiente ejemplo modifica el anterior para mostrar el valor de todos los contadores en números romanos:

ol {
  counter-reset: elemento;
  list-style-type: none;
}
li:before {
  content: counters(elemento, '. ', upper-roman) ". ";
  counter-increment: elemento;
}