CSS свойство counter-increment

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

CSS синтаксис

counter-increment: none | идентификатор | целое число | initial | inherit;

Возможные значения

ЗначениеОписание
noneЗначение по умолчанию. Запрещает увеличение счетчика.
идентификаторОпределяет одну или несколько переменных, для которых нужно изменить счетчик. Переменные разделяются пробелом.
целое числоОпределяет приращение счетчика. По умолчанию оно равно 1. Можно использовать отрицательные и нулевые значения.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Способ пронумировать главы и подглавы в виде "Глава 1", "1.1", "1.2" и т.д.


body {
     counter-reset: section;
}

 h1 {
     counter-reset: subsection;
}

 h1:before {
     counter-increment: section;
     content: "Глава " counter(section) ". ";
}

 h2:before {
     counter-increment: subsection;
     content: counter(section) "." counter(subsection) " ";
}