Функция счетчика CSS ()
Пример
Создайте счетчик для страницы (в селекторе тела). Увеличьте значение счетчика для каждого элемента <h2> и добавьте текст «Section < значение счетчика >:» перед каждым элементом <h2>:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Функция counter() возвращает текущее значение указанного счетчика в виде строки.
Версия: | CSS3 |
---|
Поддержка браузера
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
Синтаксис CSS
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
Дополнительные примеры
Пример
Установите стиль счетчика:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
Связанные страницы
Справочник по CSS: свойство содержимого
Справочник по CSS: свойство counter-increment
Справочник по CSS: свойство counter-reset