Genera contenido de forma dinámica.

La propiedad content es una de las propiedades CSS más poderosas y a la vez más controvertida. Se emplea para generar nuevo contenido de forma dinámica e insertarlo en la página HTML. 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.

Sintaxis: selector:pseudo-elemento { content : valor }

Posibles valores: normal | none | texto | url | counter(name) | counter(name,style) | counters(name,string) | counters(name,string,style) | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote | initial | inherit

Existen cuatro opciones diferentes para establecer el valor o valores de esta propiedad:

1. Uno o más de los siguientes valores:
   • Cadena de texto
   • URL
   • Contador
   • Valor de un atributo
   • open-quote
   • close-quote
2. normal
3. none
4. inherit

Se pueden utilizar sobre cualquier elemento de la página.

Ejemplos:

• Los pseudo-elementos :before y :after se pueden utilizar sobre cualquier elemento de la página. El siguiente ejemplo añade la palabra Inicio: delante de cada párrafo cuya clase CSS sea inicio y la palabra » Fin al final del párrafo cuya clase CSS sea fin.

<p class="inicio">Primer texto de ejemplo</p>
<p class="fin">Último texto de ejemplo</p>

<style>
p.inicio:before { content: "Inicio: "; }
p.fin:after { content: " » Fin"; }
</style>

• 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 <em> de la página.

<p class="inicio">Combinando las propiedades <em>content</em> y <em>quotes</em> con los <em>pseudo-elementos</em> :before y :after, se pueden añadir de forma dinámica comillas de apertura y de cierre a todos los elementos &lt;em&gt; de la página.</p>
                                    

<style>
em:before { content: open-quote }
em:after { content: close-quote }
</style>

• 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.
  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.

<p id="inicio">...</p>
<p>Primer párrafo de contenido</p>
<p>Segundo párrafo de contenido</p>
<p id="ultimo">...</p>

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

• 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 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.

<p id="inicio">Texto muestra <span class="imgContent">imagen</span> con la clase .imgContent</p>

<style>
.imgContent:after { content: url("URL-DE-IMAGEN") }
</style>

• 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.

<p><abbr title="Hipetext Transfer Protocol">HTTP</abbr></p>
<p><acronym title="Síndrome de inmuno deficiencia adquirida">Sida</acronym></p>
<p><a href="tuto-CSS.html" target="_blank">Tutorial de CSS</a></p>

<style>
abbr:after, acronym:after { content: " (" attr(title) ")" }
a:after { content: " (" attr(href) ")" }
</style>

• 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 content(nombre_del_contador). El siguiente ejemplo crea dos contadores llamado capitulo y seccion para utilizarlos con los elementos <h1> y <h2>.
  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().

<h2>Capitulo uno</h2>
<h3>Sección uno</h3>
<h3>Sección dos</h3>
<h2>Capitulo dos</h2>
<h3>Sección uno</h3>
<h3>Sección dos</h3>

<style>
body { counter-reset: capitulo }
h2 { counter-reset: seccion }
h2:before {
    content: "Capítulo " counter(capitulo) ". ";
    counter-increment: capitulo;
}
h3:before {
    content: counter(capitulo) "." counter(seccion) " ";
    counter-increment: seccion;
}
</style>

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.

<h2>Capitulo uno</h2>
<h3>Sección uno</h3>
<h3>Sección dos</h3>
<h2>Capitulo dos</h2>
<h3>Sección uno</h3>
<h3>Sección dos</h3>

<style>
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;
}
</style>

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

<p>Capitulo uno</p>
<p>Sección uno</p>
<p>Sección dos</p>
<p>Capitulo dos</p>
<p>Sección uno</p>
<p>Sección dos</p>

<style>
p { counter-increment: seccion }
p:before { content: counter(seccion, circle) }
</style>

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>
    <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>

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

Sin embargo, si se utiliza la función counters() en las reglas CSS anteriores.
En el ejemplo siguiente, 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.

<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>

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

• 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>
    <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>

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