Funkcja CSS counters()

Funkcja CSS counters() zwraca łańcuchową reprezentację wszystkich wartości liczników CSS o określonych nazwach oraz łączy je określonym łańcuchem znaków.

Funkcja ta służy do tworzenia zagnieżdżonych niestandardowych liczników CSS.

Wartości i składnia funkcji CSS counters()

Funkcja counters() jako wartość przyjmuje dwa lub trzy parametry. Pierwszy jest nazwą licznika zdefiniowanego przez własność counter-reset, drugi jest łańcuchem znaków, który zostanie użyty do połączenia wartości zagnieżdżonych liczników, a trzeci (opcjonalny) określa nazwę stylu licznika.

Nazwą stylu licznika może być jedna z wartości przyjmowanych przez własność list-style-type, nazwa zdefiniowana przez regułę @counter-style lub funkcja symbols(). Wartość domyślna to decimal, np.:

body {
  counter-reset: licznik;
}
li::before {
  counter-increment: licznik;
  content: counters(licznik, ".", disc) ". ";
}

Podsumowanie