Los contadores de contenido en CSS son una forma potente y automática de numerar elementos en una página web, como encabezados, párrafos, listas, etc. Es especialmente útil para la numeración automática de elementos de lista y encabezados en HTML.
Estos son los pasos para usar contadores de contenido en CSS:
1. Crear un contador CSS: Primero, necesitas crear un contador con la propiedad `counter-reset`. Este contador se crea habitualmente en el elemento padre que contiene los elementos que quieres numerar.
```css
body {
counter-reset: myCounter;
}
```
2. Incrementar el Contador: Luego, necesitas incrementar el contador en cada elemento que quieras numerar. Esto se hace a través de la propiedad `counter-increment`.
```css
h2 {
counter-increment: myCounter;
}
```
3. Mostrar el Contador: Finalmente, puedes mostrar el valor actual del contador. Esto se hace con la función `counter()` en la propiedad `content`.
```css
h2:before {
content: counter(myCounter) “. “;
}
```
Aquí hemos usado la pseudo-clase `:before` para insertar contenido antes de cada encabezado h2. El contenido que se inserta es el valor actual del contador, un punto y un espacio.
4. Reseteando el Contador: Si quieres iniciar el contador de nuevo a cero en algún punto, puedes hacerlo con la propiedad `counter-reset`. Por ejemplo:
```css
div.chapter {
counter-reset: myCounter;
}
```
Estos son los pasos básicos para usar contadores de contenido CSS. Puedes hacer cosas mucho más complicadas, como anidar contadores, usar múltiples contadores en el mismo elemento, etc.
