CSS counter() funktion

Föregående sida CSS cos() funktion
Nästa sida CSS counters() funktion
Gå tillbaka till föregående nivå CSS function reference manual

Definition och användning

counter() Funktionen returnerar det aktuella värdet för den specifika räknaren som en sträng.

Exempel

Exempel 1

Skapa en räknare för sidan (i body-väljaren). Lägg till räknarvärdet för varje <h2>-element och lägg till texten "Kapitel nr" innan varje <h2>-element:

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

Prova själv

Exempel 2

Ställ in stilen för räknaren:

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

Prova själv

CSS-syntax

counter(countername, counterstyle)

Värde	Beskrivning
countername	Obligatoriskt. Namnet på räknaren (same som används i counter-reset och counter-increment attributen). Observera att namnen skiljer sig i storlek.
counterstyle	Valfritt. Stilen för räknare (kan vara värdet för list-style-type, @counter-style namn eller symbols() funktion). Standardvärdet är decimalt.

Värde

Beskrivning

countername

Obligatoriskt. Namnet på räknaren (same som används i counter-reset och counter-increment attributen).

Observera att namnen skiljer sig i storlek.

counterstyle

Valfritt. Stilen för räknare (kan vara värdet för list-style-type, @counter-style namn eller symbols() funktion).

Standardvärdet är decimalt.