Вы знаете, что нумерованный список можно создать с помощью CSS-свойства counter? Постойте, это же так похоже на использование HTML-тега <ol>. Но только на первый взгляд: с помощью counter можно, например, автоматически нумеровать заголовки или сделать оглавление для объемного документа.

div {
  counter-reset: my-counter; /* cоздаем и инициализируем счетчик */
}
h2::before {
  counter-increment: tidbit-counter; /* увеличиваем значение счетчика */
  content: counter(tidbit-counter) ": "; /* визуализируем счетчик */
}

<div>
    <h1>HTML</h1>
    <h1>CSS</h1>
    <h1>JS</h1>
</div>

---

Как работает свойство counter?

Для того чтобы счетчик работал нужно выполнить три шага:

1. создать и инициализировать счетчик,
2. увеличить значение счетчика,
3. визуализировать значение счетчика.

Создаем и инициализируем счетчик

Этот шаг состоит из двух пунктов. Для начала нужно создать счетчик и дать ему имя.

Создаем счетчик

В этом примере счетчик называется my-counter. Без имени счетчика дальнейшие действия будут невозможны.

counter-reset: my-counter;

Инициализируем счетчик

Следующий пункт - определение стартового значения счетчика, по умолчанию это 0 (в этом случае можно ничего не указывать). Можно указать любое целочисленное стартовое значение. Если укзаать 20, вывод начнется с 21 (в случае, если значение счетчика увеличивается на 1 за шаг, но об этом позже).

counter-reset	результат
0	1, 2, 3…
20	21, 22, 23…
59	60, 61, 62…

Рассмотрим пример:

В данном примере для инициализации счетчика указано значение 199, по умолчанию шаг равен 1, список будет начинаться с 200.

Где должен находиться counter-reset?

Это очень важно: свойство counter-reset нужно применять к родительскому элементу. Рассмотрим некорректный пример:

/* Так делать не нужно!!! */

h2{
    counter-reset: my-counter;
}

h2:before{
    counter-increment: my-counter;
    content: counter(my-counter) ": ";
}

<div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
</div>

Значения счетчика не увеличиваются верным образом:

1: HTML
2: CSS
3: JS

Еще одно замечание: counter-reset может быть привязан и не к прямому родителю, но элемент, в котором инициализируется счетчик, должен обязательно оборачивать весь нумерованный список. Например, так:

/* Такой вариант работает верно */

section{
    counter-reset: my-counter;
}

h2:before{
    counter-increment: my-counter;
    content: counter(my-counter) ": ";
}

<section>
    <div>
        <h2>HTML</h2>
        <h2>CSS</h2>
        <h2>JS</h2>
    </div>
</section>

Результат:

1: HTML
2: CSS
3: JS

---

Увеличение значения счетчика

Итак, счетчик создан. Теперь необходимо поработать над увеличением его значения. Для этого используем следующий синтаксис:

counter-increment: <counter-name> <integer>

Вторым аргументом свойства counter-increment является целое число. Это означает, что значение счетчика может изменяться с шагом, отличным от 1. Для приведенной ниже таблицы значение свойства counter-reset равно 0:

counter-increment	результат
1	1, 2, 3…
5	5, 10, 15…
-5	-5, -10, -15…

И, конечно, чтобы запустить обратный отсчет можно использовать отрицательные числа. Посмотрим, как работает такой вариант:

div{
    counter-reset: my-counter 4;
}

h2:before{
    counter-increment: my-counter -1; /* используем отрицательное значения для шага счетчика */
    content: counter(my-counter) ": ";
}

<div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
</div>

Получим результат:

---

Визуализируем значение счетчика

Наконец, для вывода счетчика на экран нужно передать функцию counter, как значение свойства content. Это довольно часто используемый способ вывода значения CSS-свойства на странице сайта. Вот необходимый синтаксис:

counter(<counter name>, <counter list style>)

По умолчанию для списка используются арабские цифры. Но style можно изменить:

style	результат
default	1, 2, 3…
upper-alpha	A, B, C…
lower-roman	i, ii, iii…

Все варианты стилей списков находятся здесь.

Пример:

div{
    counter-reset: my-counter;
}

h2::before{
    counter-increment: my-counter;
    content: counter(my-counter, thai) " ";
}

<div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
</div>

Результат:

---

Несколько счетчиков на одной странице

Можно использовать несколько счетчиков на одной странице, просто присвоив им разные имена.

div{
    counter-reset: counter-one counter-two 100; /* создаем два счетчика */
}

h2:before{
    counter-increment: counter-one;
    content: counter(counter-one) ": ";
}

h3:before{
    counter-increment: counter-two;
    content: counter(counter-two) ": ";
}

<div>
    <h2>Первый список</h2>
    <h2>Первый список</h2>

    <h3>Второй список</h3>
    <h3>Второй список</h3>
</div>

Результат:

---

Вложенные счетчики

Как создавать вложенные списки? Нет ничего проще: просто укажите counters вместо counter в качестве аргумента свойства content. У counters есть дополнительный параметр:

counters(<counter name>, <string>, <counter list style>)

Параметр string определяет формат разделителя.

string	результат
”.”	1.1, 1.2, 1.3…
”>”	1>1, 1>2, 1>3…
“:”	1:1, 1:2, 1:3…

Посмотрим на пример:

div{
    counter-reset: multi-counters;
}

h2:before{
    counter-increment: multi-counters;
    content: counters(multi-counters,".") ": ";
}

<div>
    <h2>Фреймворки</h2>
    <div>
        <h2>Laravel</h2>
        <h2>Yii</h2>
        <h2>Symfony</h2>
    </div>
</div>

Результат:

---

Counter vs

Выбираем ol

CSS-свойство counter не замещает HTML-тег <ol>. Если перед нами нумерованный список, всегда необходимо выбирать <ol>, так как это семантически верно и повышает доступность контента для поисковых систем:

<h2>Список</h2>
<ol>
    <li>Первый элемент</li>
    <li>Второй элемент</li>
</ol>

Выбираем counter

Делаем выбор в сторону counter, если необходимо создать нумерованные заголовки h1...h6 разделенные контентом p:

<article>
    <h2>Что такое Vue.js?</h2>
    <p>Vue прогрессивный фреймворк для создания пользовательских интерфейсов.</p>
    <h2>Ссылки</h2>
    <p>Перейдите на Vuejs.org, чтобы получить больше информации.</p>
</article>

Результат:

1: Что такое Vue.js?
Vue прогрессивный фреймворк для создания пользовательских интерфейсов.

2: Ссылки
Перейдите на Vuejs.org, чтобы получить больше информации.

---

Совместимость с браузерами

CSS-свойство counter поддерживается значительным количеством браузеров, в том числе Internet Explorer 8.

Более подробную информацию можно получить на caniuse.com.

---

Источники информации

1. MDN: counters
2. MDN: list-style-type
3. w3schools: CSS counter-increment
4. w3schools: CSS counter-reset
5. CSS Tricks: counter-increment
6. CSS Tricks: counter-reset
7. 30 Seconds of CSS
8. Counters and Calc(): Two Little-Known CSS Features Explained
9. The Accessibility of ::before and ::after
10. Accessiblity support for CSS generated content

---

Спасибо за внимание.