Можно ли кастомизировать оформление content для li::before?

Question

[776166]

Проблема следующая: генерируем многоуровневый нумерованный список. Используется такая конструкция:

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

Сам код работает нормально, цифры генерируются. Однако, оформление применяется только к точке, а к самой цифре — нет.

Есть кривое решение, которое используется обычно везде — там цифра проставляется в рамках какого-нибудь другого тэга, но при этом список только выглядит списком, в самом HTML, это совсем не кошерно.

Что не так? Как починить?

Comments

[ned4ded]

Обычно кастомизируется нормально. Есть ли сайт в открытом доступе, чтобы пощупать?

[Ankhena]

https://jsfiddle.net/2hyght2q/ вроде все работает

[SelenIT3]

А что за шрифт? И не вырезаны ли из него цифры?

Answer 1

[j n]

Форкнул первый попавшийся пример с коудпена и подогнал под твои условия. Итак, смотри:

1) В элементе-родителе (в моём примере это список с классом custom-counter) я создаю счётчик при помощи свойства counter-reset с переменной li

2) В псевдоэлементе ::before, принадлежащему каждому li я ставлю автоматический инкремент на каждый новый li при помощи свойства counter-increment: li

3) Прописываю желаемый контент счетчика, в моём случае это content: "Пункт " counter(li) ": "

4) Теперь я могу назначить каждому псевдоэлементу желаемые свойства: задний фон, цвет текста и так далее