CSS

CSS Contenido Generado

<<< Ubicación en CSS Pseudo Clases en CSS >>>

Contenido generado y numeración automática

Cuando se desea que las aplicaciones del usuario procesen contenidos que no vienen en el documento fuente.

La propiedad 'content' (contenido)

Esta propiedad se usa con los pseudo-elementos :before y :after para generar contenido en un documento.

La propiedad 'content', junto con estos pseudo-elementos, especifican lo que se inserta.

h2.cap:before{content:Capítulo:}

Este ejemplo inserta la cadena Capítulo: antes del contenido del elemento h2 cuyo atributo "class" tenga el valor cap

La propiedad 'quotes' (comillas)

Esta propiedad especifica como las aplicaciones deben procesar las comillas

Por ejemplo, la hoja de estilo

/* Definimos comillas en diferentes idiomas */
i:lang(es) {quotes:'"' '"'}
i:lang(no) {quotes:"‹" "›"}

/* Inserta las comillas antes y después del contenido del elemento i */
i:before {content:open-quote}
i:after {content:close-quote}

En el siguiente código HTML

Código

<html lang="es">
 <head>
 <title>Comillas</title>
 </head>
 
 <body>
 <i>Texto entre comillas</i>
 </body>
</html>

Resultado

"Texto entre comillas"

Y en este código HTML el resultado obtenido es distinto

Código

<html lang="no">
 <head>
 <title>Comillas</title>
 </head>
 
 <body>
 <i>Texto entre comillas</i>
 </body>
</html>

Resultado

‹Texto entre comillas›

Numeración automática

La numeración automática es controlada con dos propiedades, counter-increment y counter-reset. Los contadores definidos por estas propiedades se usan con las funciones counter() de la propiedad content.

La propiedad counter-increment acepta uno o más nombres de contadores, cada uno seguido de manera opcional por un entero que indica en cuanto se incrementará el contador con cada aparición del elemento. El incremento predeterminado es 1.

La propiedad counter-reset también contiene una lista de uno o más nombres de contadores, cada uno seguido de manera opcional por un entero que da el valor en que el contador es colocado con cada aparición del elemento. El valor por defecto es 0.

En este ejemplo podemos ver como se enumeran capítulos y secciones de la forma 1, 1.1, 1.2, 1.3, 2, 2.1, etc.


h2:before {
	content: "Capítulo " counter(capítulo) ". ";
	counter-increment: capítulo;  /* Agrega 1 a capítulo */
	counter-reset: seccion;      /* Pone la sección a 0 */
}
h3:before {
	content: counter(capítulo) "." counter(seccion) " ";
	counter-increment: seccion;  /* Agrega 1 a sección */
}

Propiedades de los Contenidos Generados

Propiedad	Descripción	Valores	Detalles
content	Agregador de contenido para los pseudo elementos ":after y :before".	normal	Normal
		none	Nada
		texto	Texto
		url	URL
		counter	Contador No funciona en IE
		attr(x)	Inserta un atributo
		open-quote	Apertura de comillas No funciona en IE
		close-quote	Cierre de comillas No funciona en IE
		no-open-quote	Sin apertura de comillas No funciona en IE
		no-close-quote	Sin cierre de comillas No funciona en IE
quotes	Especifica las marcas para indicar las citas. No funciona en IE	texto	Texto
quotes		none	Nada No funciona en IE
counter-reset	Inicializa un contador.	identificador entero	Identificador entero No funciona en IE
counter-reset	Inicializa un contador.	none	Nada
counter-increment	Incrementa un contador.	identificador entero	Identificador entero No funciona en IE
counter-increment	Incrementa un contador.	none	Nada