<divelopers>: “Стилизация счётчиков списка Чтобы далеко не уходить от темы списков, п…”

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

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

Цифра в нумерованных списках — это псевдо-элемент ::marker, в который браузер автоматически подставляет значение счётчика. Его можно базово стилизовать ограниченным набором свойств:

- font-*;
- white-space;
- color;
- text-combine-upright;
- unicode-bidi;
- direction;
- content;
- animation-*;
- transition-*.

Интереснее всего свойство content. Его можно переопределить, что сбросит стандартные маркеры со счётчиком:

ol li::marker {
  content: '🔹 ';
}

/*
🔹 Foo
🔹 Bar
🔹 Baz
*/

Стандартный счётчик списка называется list-item. Используя функцию counter() для вывода значения счётчика в свойство content и встроенную конкатенацию строк, можно задать собственный суффикс. Это полезно, когда нужны скобки вместо стандартных точек:

ol li::marker {
  content: counter(list-item) ') ';
}

/*
1) Foo
2) Bar
3) Baz
*/

При использовании стандартного счётчика таким образом будут работать атрибуты reversed и start. Атрибут value будет работать частично: значение установится, но отсчёт у следующего элемента будет от предыдущего значения счётчика. С помощью data-* атрибутов и attr() можно добавить возможность настройки префикса и суффикса в HTML для контент-менеджеров:

ol {
  --prefix: '';
  --suffix: ') ';
}

ol li::marker {
  content: var(--prefix) counter(list-item) var(--suffix);
}
  
ol[data-prefix] {
  --prefix: attr(data-prefix);
}
  
ol[data-suffix] {
  --suffix: attr(data-suffix);
}

/*
<ol data-prefix="[" data-suffix="] ">
  ...
</ol>

[1] Foo
[2] Bar
[3] Baz
*/

Иногда нужно вывести цифры так, чтобы впереди были незначащие нули. Это делается с помощью передачи второго аргумента decimal-leading-zero в функцию counter():

ol li::marker {
  content: counter(list-item, decimal-leading-zero) '. ';
}

/*
09. Foo
10. Bar
11. Baz
*/

Маркеры по умолчанию вынесены за пределы элементов списка. С помощью свойства list-style-position: inside можно поместить маркеры внутрь элементов списка, чтобы текст их обтекал:

ol {
  list-style-position: inside;
}

/*
1. Foo
Foo Foo
2. Bar
Bar Bar
3. Baz
Baz Baz
*/

Если для маркеров нужна расширенная стилизация, можно перенести стандартный счётчик list-item в псевдо-элемент ::before. Все атрибуты списка продолжат работать, но псевдо-элемент ::before можно стилизовать без ограничений.

ol {
  list-style: none;
}
  
ol li::before {
  content: counter(list-item) '. ';
  /* другие стили */
}

#css