Fonction CSS counter()
Exemple
Créez un compteur dans la page (dans le sélecteur body), incrémentez la valeur du compteur pour chaque élément <h3>, et ajoutez le texte "Valeur du compteur de section" avant chaque élément <h3> :
body {
counter-reset: section; /*Réinitialiser le compteur à 0*/
}
h3:before {
counter-increment: section; /*Incrémenter la valeur du compteur*/
content: "Section " counter(section) ": "; /*Afficher le compteur*/
}
Essayez-le vous-même »
Définition et utilisation
La fonction counter() renvoie la valeur actuelle du compteur sous forme de chaîne.
La valeur du compteur est définie en utilisantcounter-resetetcounter-incrementOpération : appliquez la fonction counter() sur content pour l'afficher sur la page.
Versions prises en charge : CSS3
Prise en charge des navigateurs
| Fonction | |||||
|---|---|---|---|---|---|
| counter() | Pris en charge | Pris en charge | Pris en charge | Pris en charge | Pris en charge |
Syntaxe CSS
counter(countername, counterstyle)
| Valeur | Description |
|---|---|
| countername | Obligatoire. Le nom du compteur (le même nom que celui utilisé avec les propriétés counter-reset et counter-increment). |
| counterstyle | Facultatif. Le style du compteur (peut être une valeur de propriété CSSlist-style-type). |
Plus d’exemples
Exemple
Définition des styles de compteur :
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
Essayez-le vous-même »
Exemple
Définition des compteurs imbriqués :
ol {
counter-reset: section; /*Créer une nouvelle instance de compteur pour chaque élément ol*/
list-style-type: none;
}
li:before {
counter-increment: section; /*Incrémenter uniquement l'instance actuelle du compteur.*/
content: counters(section, ".") " "; /*Ajouter une valeur séparée par un '.' à toutes les instances de compteur*/
}
Essayez-le vous-même »
autres extensions