Funkcja CSS counter()

Definicja i użycie

counter() Funkcja zwraca bieżącą wartość określonego licznika jako ciąg znaków.

Przykład

Przykład 1

Utwórz licznik strony (w selektorze body). Dodaj wartość licznika do każdego elementu <h2> i dodaj tekst "Rozdział X" przed każdym elementem <h2>:

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

Spróbuj sam

Przykład 2

Ustawienie stylu licznika:

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

Spróbuj sam

Gramatyka CSS

counter(countername, counterstyle)
Wartość Opis
countername

Wymagane. Nazwa licznika (jest taka sama jak w atrybutach counter-reset i counter-increment).

Uwaga, nazwy są wrażliwe na wielkość liter.
counterstyle

Opcjonalne. Styl licznika (może być wartością list-style-type, nazwą @counter-style lub funkcją symbols()).

Domyślna wartość to dziesiętna.

Szczegóły techniczne

Wersja: CSS3

Przeglądarka obsługuje

Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Tutorial:Liczniki CSS

Odniesienie:Atrybut content w CSS

Odniesienie:Atrybut counter-increment w CSS

Odniesienie:Atrybut counter-reset w CSS

Odniesienie:Reguła @counter-style w CSS

Odniesienie:Funkcja counters() w CSS