Свойство counter-increment

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

Синтаксис

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

Значения

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

Пример

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

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: counter(test);
}

Результат:

Пример

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

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Пример

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

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test 9;
}
#parent p::before {
  counter-increment: test;
  content: "№" counter(test) ".";
}

Результат:

Пример

Пусть теперь нумерация будет с шагом "2". Для этого в качестве шага ставим двойку:

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test;
}
#parent p::before {
  counter-increment: test 2; /* ставим двойку */
  content: "№" counter(test) ".";
}

Результат:

Пример

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

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

html<div id="parent">
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>

css#parent {
  counter-reset: test -1;
}
p::before {
  counter-increment: test 2;
  content: "№" counter(test) ".";
}

Результат:

Смотрите также