При создании лендингов и корпоративных сайтов часто требуется оформить последовательность этапов работы. Самый распространенный вариант — разместить перед каждым заголовком номер в круге.
Многие решают эту задачу вручную, прописывая номера в HTML. Однако существует гораздо более удобный способ — встроенные счетчики CSS.
Преимущества CSS Counter
- не нужно вручную менять номера;
- при добавлении нового блока нумерация обновляется автоматически;
- HTML остается чистым;
- оформление полностью управляется CSS.
Создаем счетчик
Сначала необходимо объявить счетчик.
.advantages .part-wrap {
counter-reset: step;
}
Свойство counter-reset создает новый счетчик с именем step и устанавливает его значение в ноль.
Увеличиваем счетчик
Для каждого элемента увеличиваем значение счетчика.
.advantages .element {
counter-increment: step;
}
Каждый следующий блок автоматически получает следующий номер.
Выводим номер
Сам номер выводится с помощью псевдоэлемента ::before.
.advantages .element h3::before {
content: counter(step);
width: 34px;
height: 34px;
display: inline-flex;
justify-content: center;
align-items: center;
background: #b14191;
color: #fff;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
margin-right: 12px;
flex-shrink: 0;
}
Функция counter(step) выводит текущее значение счетчика.
Размещаем номер рядом с заголовком
Чтобы круг с номером располагался непосредственно перед текстом заголовка и переносы работали корректно, удобно использовать Flexbox.
.advantages .element h3 {
display: flex;
align-items: flex-start;
gap: 12px;
flex-wrap: wrap;
line-height: 1.3;
}
Такое решение обеспечивает корректный перенос длинных заголовков и не требует абсолютного позиционирования.
Как работает CSS Counter
Механизм состоит из трех частей:
- counter-reset — создание счетчика;
- counter-increment — увеличение значения для каждого элемента;
- counter() — вывод текущего значения.
Все три свойства работают совместно и позволяют полностью отказаться от ручной нумерации.
Где применяется
- этапы разработки;
- пошаговые инструкции;
- процесс оформления заказа;
- таймлайны;
- карточки преимуществ.
Подобные приемы оформления интерфейсов мы регулярно используем при создании сайтов под ключ. Грамотно реализованная верстка делает сайт удобнее для пользователей, упрощает дальнейшую поддержку проекта и положительно влияет на восприятие контента.