Contenido generado

Tabla de contenidos

1. content
2. counter-increment
3. counter-reset
4. quotes

content

Descripción

Define un contenido que se generará antes o después del contenido original de un elemento.

Valores posibles

• Una cadena de texto. En caso de que sea necesario, se pueden escapar caracteres por medio de la barra invertida (\).
• Un URL: Especifica la localización de un contenido que debe ser incluido, como por ejemplo una imagen.
• Un contador. Hay dos sintaxis para los contadores:
  • counter(identificador): Se emplea para establecer un contador en elementos no anidados, como por ejemplo encabezados. Se puede especificar su estilo por medio de la sintaxis counter(identificador,estilo_de_lista), pudiendo especificarse los mismos estilos que para list-style-type.
  • counters(identificador,cadena_de_texto): Se emplea para establecer contadores en elementos anidados, como por ejemplo listas. Se puede especificar su estilo por medio de la sintaxis counter(identificador,cadena_de_texto,estilo_de_lista), pudiendo especificarse los mismos estilos que para list-style-type.

  Por su complejidad, he creado una página de ejemplo para contadores, independiente de los ejemplos de content.

• normal: Equivale a none.
• attr(): Se indica entre los paréntesis el valor del atributo que se quiere mostrar.
• open-cuote: Especifica que debe generarse una comilla de apertura al comienzo del texto del elemento. El tipo de comilla se especifica por medio de la propiedad quotes.
• close-quote: Especifica que debe generarse una comilla de cierre al final del texto del elemento. El tipo de comilla se especifica por medio de la propiedad quotes.
• no-open-quote: Especifica que no se debe emplear comilla al comienzo del texto del elemento.
• no-close-quote: Especifica que no se debe emplear comilla al final del texto del elemento.
• none: No se añade al elemento contenido generado.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

normal.

Aplicable a

Cualquier elemento, pero el selector debe ser complementado con los pseudoelementos :before o :after.

¿Heredada?

No.

Ver ejemplos de los valores de content (attr() y los valores relacionados con las comillas los trato conjuntamente en el ejemplo de quotes).

counter-increment

Descripción

Especifica el incremento de un contador si éste se está empleando por medio de la propiedad content.

Valores posibles

• Uno o más identificadores a los que se hace referencia por medio de counter o counters.
• none: No se especifica incremento.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

none.

Aplicable a

Todos los elementos, a los que se haya aplicado un contador por medio de content.

¿Heredada?

No.

Notas

El incremento por defecto es 1, pero se pueden especificar otros valores por medio de la sintaxis counter-increment(identificador,incremento), donde incremento es un número natural.

Por su complejidad, he creado una página de ejemplo para contadores.

counter-reset

Descripción

Restablece el valor de un contador si éste se está empleando por medio de la propiedad content.

• Uno o más identificadores a los que se hace referencia por medio de counter o counters.
• none: Se especifica que el contador no se restablezca.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

none.

Aplicable a

Todos los elementos, a los que se haya aplicado un contador por medio de content.

¿Heredada?

No.

Notas

Los contadores se restablecen por defecto a 0, pero se puede especificar otro valor por medio de la sintaxis counter-reset(identificador,incremento), donde incremento es un número natural.

Por su complejidad, he creado una página de ejemplo para contadores.

quotes

Descripción

Indica las comillas generadas que se añadiran al comienzo y al final del texto del elemento.

Valores posibles

• El tipo de comilla: La comilla puede ser simple, doble, o bien su valor hexadecimal Unicode escapado con barra invertida (\).
• none: Indica que el elemento no debe presentar comillas.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

Depende del agente de usuario.

Aplicable a

Todos los elementos a los que se haya aplicado content:open-quote y content:close-quote.

¿Heredada?

Sí.

Notas

Se pueden especificar varios tipos de comillas para niveles adicionales de comillas anidadas. El siguiente código:

    q{
        quotes: "«" "»" "“" "”" "‘" "’"; 
    }                    
                    

indica que una elemento q debe presentar comillas angulares, pero que una segunda cita anidada én la primera debería presentar comillas inglesas, y una tercera comillas simples.

La especificación recoge una tabla con los valores hexadecimales de diversos tipos de comillas (inglés).

Ver ejemplos de los valores de quotes.