@counter-style — это правило CSS, которое позволяет определять свои собственные стили нумерации для списков, счётчиков и других элементов, использующих функцию counter(). Вместо привычных арабских цифр, латинских букв или стандартных маркеров вы можете задать любые символы, изображения или даже сложные последовательности.

Поддержка: доступно в Baseline в статусе «Newly Available» с 18 сентября 2023 года.

Зачем это нужно

  • Красивые нумерованные списки в дизайне сайтов и приложений.
  • Необычные маркеры для оглавлений, шагов, этапов.
  • Локализация нумерации под редкие системы письма.
  • Игровые или тематические интерфейсы (смайлики, иконки, символы).

Синтаксис

@counter-style имя-стиля {
  system: <система>;
  symbols: <символы>;
  /* дополнительные дескрипторы */
}

Основные дескрипторы

  • system — алгоритм формирования счётчика. Самые полезные:
    • cyclic — перебирает символы по кругу.
    • fixed — использует символы один раз, потом останавливается.
    • numeric, alphabetic, symbolic — классические системы.
  • symbols — список символов или строк.
  • prefix, suffix — добавляют текст до и после маркера (по умолчанию suffix: ". ").
  • range — диапазон, в котором действует стиль.

Простые примеры

Круглые чёрно-белые маркеры

@counter-style circled {
  system: fixed;
  symbols: ⚪ ⚫ ⚪ ⚫ ⚪ ⚫ ⚪ ⚫;
  suffix: " ";
}

ol {
  list-style: circled;
}

Результат: первые 8 пунктов будут чередовать белый и чёрный кружки, дальше — обычные цифры.

Римские цифры из символов

@counter-style roman-like {
  system: additive;
  additive-symbols: 10 X, 9 IX, 5 V, 4 IV, 1 I;
  suffix: ". ";
}

ol.roman {
  list-style: roman-like;
}

Применение к произвольным элементам

Счётчики работают не только со списками. Можно нумеровать заголовки:

@counter-style boxes {
  system: numeric;
  symbols: "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "[";
  suffix: "] ";
}

section {
  counter-increment: box;
}

section::before {
  content: counter(box, boxes);
  color: #e91e63;
}

Готовые системные стили

Браузеры уже имеют множество встроенных стилей, которые можно переопределить:

  • decimal, decimal-leading-zero
  • lower-roman, upper-roman
  • lower-greek, georgian, armenian и др.

Полезные ссылки

Теперь вы можете создавать уникальные стили нумерации под любой проект!