Fonction CSS counter()

Définition et utilisation

counter() La fonction retourne la valeur actuelle du compteur spécifié sous forme de chaîne de caractères.

Exemple

Exemple 1

Créer un compteur pour la page (dans le sélecteur body). Ajouter une valeur de compteur à chaque élément <h2> et ajouter le texte "Chapitre X" avant chaque élément <h2> :

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Essayez-le vous-même

Exemple 2

Définir le style du compteur :

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

Essayez-le vous-même

Syntaxe CSS

counter(countername, counterstyle)

Détails techniques

Support du navigateur

Pages connexes

Tutoriel :Compteur CSS

Référence :Attribut content CSS

Référence :Attribut counter-increment CSS

Référence :Attribut counter-reset CSS

Référence :Règle @counter-style CSS

Référence :Fonction counters() CSS