Fonction compteur CSS ()
Exemple
Créez un compteur pour la page (dans le sélecteur de corps). Incrémentez la valeur du compteur pour chaque élément <h2> et ajoutez le texte "Section < valeur du compteur > :" avant chaque élément <h2> :
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La fonction counter() renvoie la valeur actuelle du compteur nommé, sous forme de chaîne.
| Version: | CSS3 |
|---|
Prise en charge du navigateur
| Function | |||||
|---|---|---|---|---|---|
| counter() | Yes | Yes | Yes | Yes | Yes |
Syntaxe CSS
counter(countername,
counterstyle)
| Value | Description |
|---|---|
| countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
| counterstyle | Optional. The style of the counter (can be a list-style-type value) |
Plus d'exemples
Exemple
Définissez le style du compteur :
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Pages connexes
Référence CSS : propriété de contenu
Référence CSS : propriété de contre-incrémentation
Référence CSS : propriété de réinitialisation du compteur