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

Традиционные HTML-списки (<ol> и <ul>) предлагают ограниченные возможности стилизации маркеров. Когда дизайн требует нестандартного оформления — например, цифр в кружках или многоуровневой нумерации — на помощь приходят CSS-счетчики.

CSS-счетчики — это мощный инструмент, позволяющий:

• Создавать сложные схемы нумерации

• Контролировать внешний вид маркеров

• Формировать многоуровневые структуры (1.1, 1.2 и т.д.)

• Легко обновлять нумерацию при изменениях

Базовое использование

Начнем с простого примера нумерованного списка:

<ol class="custom-list">
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ol>

.custom-list {
  counter-reset: item; /* Инициализация счетчика */
  list-style-type: none; /* Убираем стандартные маркеры */
  padding-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.custom-list li::before {
  counter-increment: item; /* Увеличение счетчика */
  content: counter(item); /* Вывод значения */
  position: absolute;
  left: 0;
  top: 0;
  background: #3498db;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9em;
}

В этом примере:

1. counter-reset инициализирует счетчик с именем "item"

2. counter-increment увеличивает значение счетчика для каждого элемента

3. content: counter(item) выводит текущее значение

Стилизация счетчиков

CSS-счетчики можно стилизовать как обычные элементы. Вот несколько популярных вариантов:

Круглые маркеры

li::before {
  /* ... */
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

Квадратные маркеры

li::before {
  /* ... */
  background: #2ecc71;
  color: white;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}

Только текст

li::before {
  content: counter(item) ". ";
  color: #9b59b6;
  font-weight: bold;
  margin-right: 10px;
}

Форматы нумерации

CSS поддерживает различные стили нумерации через второй параметр функции counter():

content: counter(item, decimal); /* 1, 2, 3 (по умолчанию) */
content: counter(item, lower-roman); /* i, ii, iii */
content: counter(item, upper-roman); /* I, II, III */
content: counter(item, lower-alpha); /* a, b, c */
content: counter(item, upper-alpha); /* A, B, C */
content: counter(item, lower-greek); /* греческие буквы */

Многоуровневые списки

Для создания вложенных списков с нумерацией вида 1.1, 1.2 используйте функцию counters():

<ol class="multilevel">
  <li>Первый уровень
    <ol>
      <li>Второй уровень</li>
      <li>Второй уровень
        <ol>
          <li>Третий уровень</li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

.multilevel {
  counter-reset: section;
  list-style-type: none;
}

.multilevel ol {
  counter-reset: subsection;
  list-style-type: none;
}

.multilevel li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

.multilevel li li::before {
  counter-increment: subsection;
  content: counters(section, ".") "." counter(subsection) " ";
}

Продвинутые техники

Начальное значение и шаг

.custom-list {
  counter-reset: item 5; /* Начинаем с 5 */
}

.custom-list li::before {
  counter-increment: item 2; /* Увеличиваем на 2 */
}

Кастомные стили счетчиков

@counter-style circled-numbers {
  system: fixed;
  symbols: ➀ ➁ ➂ ➃ ➄;
  suffix: " ";
}

.custom-list li::before {
  content: counter(item, circled-numbers);
}

Комбинирование счетчиков

.content {
  counter-reset: chapter figure;
}

.chapter::before {
  counter-increment: chapter;
  content: "Глава " counter(chapter) ": ";
}

.figure::before {
  counter-increment: figure;
  content: "Рис. " counter(chapter) "." counter(figure);
}

Ограничения и альтернативы

CSS-счетчики имеют несколько ограничений:

1. Сложная анимация значений требует JavaScript

2. Ограниченные возможности форматирования внутри content

3. Не все браузеры поддерживают @counter-style

Альтернативы:

• CSS ::marker - новый способ стилизации маркеров, но с ограниченной поддержкой

• SVG-маркеры - для сложных графических элементов

• Grid/Flex-раскладка - когда нужен полный контроль над позиционированием

Заключение

CSS-счетчики предлагают гибкий способ создания сложных схем нумерации без JavaScript. Они особенно полезны для:

• Документации с многоуровневой структурой

• Оформления списков с нестандартными маркерами

• Генерации сложных номеров (глава.раздел.параграф)

Освоив эту технологию, вы сможете создавать профессиональные нумерованные списки, соответствующие любому дизайну.