Функция CSS counter()

Определение и использование

counter() Функция возвращает текущее значение указанного счетчика в виде строки.

Пример

Пример 1

Создайте счетчик для страницы (в селекторе body). Увеличьте значение счетчика для каждого элемента <h2> и добавьте текст «Статья №» перед каждым элементом <h2>:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Раздел " counter(section) ": ";
}

Попробуйте сами

Пример 2

Установите стиль счетчика:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Раздел " counter(section, upper-roman) ": ";
}

Попробуйте сами

Грамматика CSS

counter(countername, counterstyle)
Значение Описание
countername

Обязателен. Название счетчика (равное названию, используемому в атрибутах counter-reset и counter-increment).

Обратите внимание, что имена различаются по регистру.
counterstyle

Опционально. Стиль счетчика (может быть значением list-style-type, именем @counter-style или функцией symbols()).

Значением по умолчанию является десятичное.

Технические детали

Версия: CSS3

Поддержка браузеров

Хром Эдж Фаерфокс Сафари Опера
Поддержка Поддержка Поддержка Поддержка Поддержка

Связанные страницы

Урок:CSS счетчик

Ссылка:Атрибут CSS content

Ссылка:Атрибут CSS counter-increment

Ссылка:Атрибут CSS counter-reset

Ссылка:Правило CSS @counter-style

Ссылка:Функция counters() в CSS