CSS counter() funktion

Definition og brug

counter() Funktionen returnerer den nuværende værdi for den specificerede tæller som en streng.

Opret en tæller for siden (i body-vælgeren). Tilføj tællerens værdi til hver <h2>-element og tilføj teksten "Kapitel nr." før hvert <h2>-element:

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

Indstil tællerstilen:

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

counter(countername, counterstyle)

Værdi	Beskrivelse
countername	Obligatorisk. Navnet på tælleren (samme som bruges i counter-reset og counter-increment attributterne). Bemærk, at navne er følsomme over for store og små bogstaver.
counterstyle	Valgfri. Stilkarakterer for tællere (kan være værdierne for list-style-type, @counter-style navn eller symbols() funktion). Standardværdien er decimal.

Værdi

Beskrivelse

countername

Obligatorisk. Navnet på tælleren (samme som bruges i counter-reset og counter-increment attributterne).

Bemærk, at navne er følsomme over for store og små bogstaver.

counterstyle

Valgfri. Stilkarakterer for tællere (kan være værdierne for list-style-type, @counter-style navn eller symbols() funktion).

Standardværdien er decimal.