CSS counters или как задать стили для чисел в списках

Уверен, вы прекрасно знаете про нумерованные и ненумерованные списки (или же, как их еще называют, маркированные списки). Но как быть в случае, когда у нас уникальный дизайн, а соответственно и стили для таких вот списков тоже выглядят весьма уникально?

Как использовать счетчики в CSS

Подумайте сами, вот у вас макет, с такими красивыми цифрами в кружке и сами цифры размером в 30 пикселей а вот текст после них уже гораздо меньше 🙂 . Тут есть 3 пути решения (а на самом деле их гораздо больше) :

1. вы можете нарезать это все картинками;
2. вы можете записать все это статически через другие теги (нормальный вариант, даже для 20 элементов, если знать как быстро сформировать HTML);
3. и наконец – использовать CSS counters.

Кстати говоря, мы рассматриваем вариант без использования JavaScript, PHP, Python и других языков программирования.
Для начала убираем наши стандартные стили у элементов списка (можно не только это делать для списков, но рассмотрим на примере их, плюс, мне кажется, так будет более верно):

li { list-style-type: none; }

Наш HTML:

<ol class="my-super-list">
  <li>...</li>
  <li>...</li>
</ol>

и начинаем.. КВН? нет – CSS 🙂

.my-super-list { counter-reset: list; }

Очень важно использовать именно на родительском элементе, а не на всех ol, как об этом вы могли прочитать в документации. Используем именно конкретный класс, не забывайте про нормальные нумерованные элементы на странице.
list – это некая переменная, которая будет увеличиваться с каждым элементом li

.my-super-list li:before {
    counter-increment: list; /* Увеличиваем значение счетчика */
    content: counter(list); /* Выводим обычное число */
}

Если вам понадобится более сложные махинации с числами, например 1.1, 1.2, 1.3 – то наш HTML будет

<ol class="my-super-list">
   <li>Пункт</li>
    <ol class="my-sub-super-list">
     <li>Подпункт</li>

А CSS:

li { list-style-type: none; }

.my-super-list { counter-reset: list; }

.my-super-list li:before {
  counter-increment: list;
  content: counter(list) ". "; /* Добавим точку для наглядности */
}

.my-super-list .my-sub-super-list { counter-reset: list2; } /* имя переменной вложенного списка */

.my-super-list .my-sub-super-list li:before {
  counter-increment: list2; /* Увеличиваем значение переменной вложенного списка */
  content: counter(list) "." counter(list2) ". "; /* Выводим число в виде 1.1, 1.2 и т.д. */
}

Думаю с этим вы разберетесь. Последнее, что хотелось бы добавить –  т.к. мы используем :before, то для позиционирования:

.my-super-list li { position: relative; }

.my-super-list li:before{
  position: absolute;
  left: 0;
  top: 5px;
}