Стилизация списков с помощью CSS ::marker

Существует много способов кастомизации списков, они все достаточно просты и понятны. Из всех способов стоит отметить один самый гибкий это свойство ::marker. Оно позволяет более гибко стилизовать списки с помощью CSS.

Для ::marker можно использовать следующие CSS свойства:

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

Для примера воспроизведём популярную ситуацию когда надо сделать не стандартный нумерованный список:

li::marker {
	content: counter(list-item) ".) ";
	color: red;
}

Пример реализации