CSS Contenido Generado

Agrega contenido a su página mediante CSS o genera una numeración automática dentro de la misma.


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

Sintaxis

selector.clase:before {content:valor}

Los posibles valores para la propiedad content

normal | none | texto | URL | counter() | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote

Ejemplo

Veamos el comportamiento de la propiedad content

Código
<head>
<style type="text/css">
h3.cap:before {content: Capítulo: }
</style>
</head>

<body>
<h3 class="cap">16</h3>
</body>
Resultado

Capítulo: 16


La propiedad 'quotes' (comillas)

Esta propiedad especifica como las aplicaciones deben procesar las comillas

Ejemplo

Vamos a definir la hoja de estilos.

Código CSS

/* 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}

Primer ejemplo con comillas en español

Código 1 HTML
<html lang="es">
<head>
<title>Comillas</title>
</head>

<body>
<i>Texto entre comillas</i>
</body>
</html>
Resultado 1
"Texto entre comillas"

Segundo ejemplo con comillas en noruego

Código 2 HTML
<html lang="no">
<head>
<title>Comillas</title>
</head>

<body>
<i>Texto entre comillas</i>
</body>
</html>
Resultado 2
<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 y Numeración Automática

Propiedad Descripción Valores Detalles Ej.
content Agregador de contenido para los pseudo elementos ":after y :before". normal Normal Ejemplo del uso de content con el valor normal
none Nada
texto Texto
url URL Ejemplo de como insertar una imagen antes de un elemento
counter Contador
No funciona en IE
Ejemplo de como numerar secciones y subsecciones
attr(x) Inserta un atributo Ejemplo de como insertar un atributo como texto
open-quote Apertura de comillas
No funciona en IE
Ejemplo de como insertar comillas desde la definición del estilo
close-quote Cierre de comillas
No funciona en IE
no-open-quote Sin apertura de comillas
No funciona en IE
Ejemplo de como no insertar comillas con content
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 Ejemplo de como definir marcas
none Nada
No funciona en IE
Ejemplo de como definir anular las marcas
counter-reset Inicializa un contador. identificador entero Identificador entero
No funciona en IE
Ejemplo de como numerar secciones y subsecciones
none Nada Ejemplo de como numerar secciones y no enumerar subsecciones
counter-increment Incrementa un contador. identificador entero Identificador entero
No funciona en IE
Ejemplo de como numerar secciones y subsecciones
none Nada Ejemplo de como no enumerar secciones y si enumerar subsecciones


<<< CSS y los Pseudo Elementos Ejemplos de CSS >>>

En la Web