Les compteurs de contenu en CSS permettent de créer de manière automatique des compteurs numériques. Les exemples les plus courants incluent les numéros de listes et de chapitres. Cela peut être particulièrement utile lorsque vous travaillez avec de longs documents ou des structures de contenu complexes.
Voici comment utiliser les compteurs de contenu en CSS :
1. Créez un compteur : Pour cela, vous devez utiliser la propriété `counter-reset` de CSS. Cette propriété définit un compteur à un nombre spécifique. Par exemple, vous pouvez l’initialiser à zéro en utilisant `counter-reset: compteur 0;`.
1. Utilisez le compteur : Ensuite, vous pouvez utiliser le compteur dans le contenu généré en utilisant la fonction `counter()`.
Par exemple, `content: counter(compteur) “. “`
1. Incrementez le compteur : Enfin, vous devez utiliser la propriété `counter-increment` pour augmenter automatiquement le compteur à chaque fois qu’un nouvel élément est créé. Par exemple, `counter-increment: compteur;`.
Voici un exemple pour rendre les choses plus claires :
```
body {
counter-reset: section; /* Initialisez le compteur à 0 */
}
h1::before {
counter-increment: section; /* Augmentez le compteur de 1 */
content: “Section “ counter(section) “: “; /* Affichez le nombre de sections avant le titre de la section */
}
```
Dans cet exemple, à chaque fois qu’une nouvelle section est créée avec un élément `
