Свойство counter-increment - задает автоматическую нумерацию элементов, например, абзацев или заголовков. Используется совместно со свойством counter-reset, псевдоэлементами ::after и ::before, свойством content, внутри которого используется функция counter. Для лучшего понимания рекомендую посмотреть примеры и видео.

См. также свойство counter-reset, которое сбрасывает значение счетчика в ноль. Данное свойство обязательно нужно использовать при работе с counter-increment, при этом оно устанавливается для родителя.

Синтаксис

селектор {
	counter-increment:  название_счетчика [шаг_изменения_счетчика] | none | inherit;
}

Значения

Значение Описание
название_счетчика Обычное слово (как название класса или id). Можно задавать несколько названий, разделяя их пробелом. В этом случае одновременно будут меняться несколько счетчиков.
шаг_изменения_счетчика Целое положительное или отрицательное число. Необязательный параметр.
none Запрещает увеличение счетчика для текущего селектора.
inherit Наследует значение родителя.

Значение по умолчанию: none.

Значение по умолчанию для шага, если он не задан (но при этом задано название счетчика): 1.

Примеры

Пример

Сделаем так, чтобы абзацы нумеровались автоматически:

родитель абзацев {
	counter-reset: test;
}
p::before {
	counter-increment: test;
	content: counter(test);
}

Результат выполнения кода:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Пример

Пусть кроме нумерации добавляется еще какой-нибудь текст. В нашем случае перед цифрой и точка - после:

родитель абзацев {
	counter-reset: test;
}
p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Результат выполнения кода:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Пример

Начнем нумерацию с 10-ти. Для этого делаем так counter-reset: test 9; - ставим девятку, на 1 меньше, чем нам нужно:

родитель абзацев {
	counter-reset: test 9;
}
p::before {
	counter-increment: test;
	content: "№" counter(test) ".";
}

Результат выполнения кода:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Пример

Пусть теперь нумерация будет с шагом "2", то есть 1,3,5 и так далее (хотелось бы, на самом деле нумерация начнется с двойки - как с этим бороться - см. следующий пример). Для этого делаем так counter-increment: test 2; - ставим двойку:

родитель абзацев {
	counter-reset: test;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Результат выполнения кода:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Пример

В предыдущем примере нумерация началась с двойки, а мы хотели бы с единицы. Почему так произошло? Потому что counter-reset сбрасывает значения счетчика с ноль, а затем counter-increment добавляет свой шаг: по умолчанию единицу, поэтому раньше у нас нумерация начиналась с 1. А теперь прибавляется двойка - и нумерация начинается с двойки.

Для исправления проблемы поставим начальное значение счетчика в -1 counter-reset: test -1; - и теперь нумерация начнется с 1 и будет увеличиваться на 2:

родитель абзацев {
	counter-reset: test -1;
}
p::before {
	counter-increment: test 2;
	content: "№" counter(test) ".";
}

Результат выполнения кода:

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.