Contadores CSS

Los contadores CSS se establecen mediante una variable y se incrementan según las reglas.

Numeración automática con contadores

Los contadores CSS incrementan la variable según las reglas.

Los contadores CSS utilizan las siguientes propiedades:

  • counter-reset- Crear o reiniciar el contador
  • counter-increment- Incrementar la variable
  • content- Insertar contenido generado
  • counter()ocounters()función() - Agrega el valor del contador a un elemento

Para usar contadores CSS, primero hay que crearlos con counter-reset:

El siguiente ejemplo crea un contador en la página (en el selector body). El valor del contador se incrementa para cada elemento <h2>, y se añade "Section <" antes de cada elemento <h2>.valor del contador>:"

Ejemplos CSS

body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

Pruébalo »

Contadores anidados

El siguiente ejemplo crea un contador en la página. Añade el valor del contador "Section <" antes de cada elemento <h1>.valor del contador del título principal>." El valor del contador anidado se coloca antes del elemento <h2>, con el contenido "<valor del contador del título principal>.<valor del contador del subtítulo>":

Ejemplos CSS

body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; }

Pruébalo »

Los contadores también se pueden usar en listas. Los subelementos de una lista se crean automáticamente. Aquí hemos usadocounters()la función counter() para insertar cadenas en diferentes niveles de anidamiento:

Ejemplos CSS

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

Pruébalo »

Propiedades de contadores CSS

Propiedad Descripción
content Usa los pseudo-elementos ::before y ::after para insertar contenido generado automáticamente
counter-increment Incrementa uno o más valores
counter-reset Crea o reinicia uno o más contadores
Otras extensiones