Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов :after и :before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.
Синтаксис
counter-increment: none | inherit | идентификатор | целое число
Значения
none
Запрещает увеличение счетчика для текущего селектора.
inherit
Наследует значение родителя.
идентификатор
Задает одну или несколько переменных, для которых требуется изменить значение счетчика. Переменные разделяются между собой пробелом.
целое число
Определяет значение приращения счетчика. По умолчанию оно равно 1. Допускается использовать отрицательные и нулевые значения.
Возможные сочетания значений свойств counter-reset и counter-increment показаны в табл. 1.
Табл. 1. Изменение нумерации списка
Код
Результат
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Список начинается с нуля.
0, 1, 2
LI { list-style-type: none; }
OL { counter-reset: list; }
LI:before {
counter-increment: list 2;
content: counter(list) ". ";
}
Выводятся все четные числа.
2, 4, 6
LI { list-style-type: none; }
OL { counter-reset: list -1; }
LI:before {
counter-increment: list list;
content: counter(list) ". ";
}
Выводятся все нечетные числа.
1, 3, 5
LI { list-style-type: none; }
OL { counter-reset: list 9; }
LI:before {
counter-increment: list;
content: counter(list) ". ";
}
Для элементов, у которых установлено display:none, значение счётчика не меняется.
Дежурная шутка
По опросам пользователей интернета, единственный спам, который бы им понравился, это была бы ссылка на видео: "Спамеру насильственно удлиняют член пасатижами, перед тем, как залить его бетоном на 800 га земли в домах от застройщика, под аплодисменты состоятельных мужчин из Германии".