Contadores CSS

Los contadores CSS son variables mantenidas por CSS cuyo valor puede ser incrementado mediante reglas de CSS (para rastrear cuantas veces se usan). Los contenedores permiten ajustar la apariencia del contenido basado en su lugar en el documento.

Para trabajar con contadores CSS podemos usar las siguientes propiedades:

Propiedad	Descripción
`counter-reset`	Crear o reseatea un contador.
`counter-increment`	Incrementa el valor de un contador.
`content`	Inserta contenido generado.
`counter() o counters()`	Agrega el valor de un contenedor a una etiqueta. Son funciones de propiedad.

Para usar un contador CSS, primero debe ser creado con counter-reset.

En el siguiente ejemplo, se crea un contador para la página (en el selector body). Después incrementa el valor del contador por cada etiqueta <h2> y agrega "seccion <valor del contador>:" al inicio de cada etiqueta <h2>:

Contadores anidados

El siguiente ejemplo, crea un contador para la página (seccion) y otro contador para cada etiqueta <h1> (subseccion). El contador seccion será contado para cada etiqueta <h1> con "seccion <valor del contador de seccion>.", y el contador subseccion será contado por cada etiqueta <h2> con "<valor del contador de seccion>.<valor del contador de subseccion>":

body {
  counter-reset: seccion;
}
h1 {
  counter-reset: subseccion;
}
h1:before {
  counter-increment: seccion;
  content: "Sección " counter(seccion) ". ";
}
h2:before {
  counter-increment: subseccion;
  content: counter(seccion) "." counter(subseccion) " ";
}

Un contador también puede ser útil para crear listas de indice porque una nueva instancia de un contador se crea automáticamente en etiquetas secundarias. Aquí usamos la función counters() para insertar una cadena entre diferentes niveles de contadores anidados:

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