counter-increment

Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов ::after и ::before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

Краткая информация

Синтаксис

counter-increment: [<переменная> | <число>?]+ none

Значения

none

Запрещает увеличение счётчика для текущего селектора.

<переменная>

Задаёт одну или несколько переменных, для которых требуется изменить значение счётчика. Переменные разделяются между собой пробелом.

<число>

Определяет значение приращения счётчика. По умолчанию оно равно 1. Допускается использовать только положительные целые числа, отрицательные целые числа и ноль.

Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.

li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

li { list-style-type: none; }
ol { counter-reset: list; }
li::before {
  counter-increment: list 2;
  content: counter(list) ". ";
}

li { list-style-type: none; }
ol { counter-reset: list -1; }
li::before {
  counter-increment: list list;
  content: counter(list) ". ";
}

li { list-style-type: none; }
ol { counter-reset: list 9; }
li::before {
  counter-increment: list;
  content: counter(list) ". ";
}

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства counter-increment

Объектная модель

Объект.style.counterIncrement

Примечание

Для элементов, у которых установлено display: none, значение счётчика не меняется.

Спецификация

Браузеры