User Avatar

Свойство counter-increment

Описание

Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

Применяется совместно с псевдоэлементами ::after и ::before.

Синтаксис

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

Дополнительно

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

Код Результат 
   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) '. '; }

Список начинается с 10.

10, 11, 12

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
body {
counter-reset: heading;
}
#test:before {
counter-increment: heading;
content: 'Пункт ' counter(heading) '. ';
}
</style>
<h2 id='test'>HTML</h2>
<h2 id='test'>CSS</h2>
<h2 id='test'>JavaScript</h2>
</body>
</html>

Читайте также

Свойство background

Универсальное свойство позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке. Включает в себя свойства: ...

Вложенные селекторы

При создании веб-страницы часто приходится вкладывать одни элементы внутрь других. Чтобы стили для этих элементов использовались корректно, помогут вл...

Свойство opacity

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элеме...

Свойство justify-content

Определяет, как браузер распределяет пространство вокруг флекс - элементов вдоль главной оси контейнера....