Вы здесь

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) " ";
}