По умолчанию цвет маркеров для списков в HTML есть таким как и сам текст. Допустим, нам нужно сделать цвет текста в списке <ol> черным, а сами цифры фиолетовыми... Конечно можно было бы усложнить код, завернув содержимое <li> в тэг <span>...
Вот таким образом, например:
<ol>
<li><span>первый пункт нумерованного списка</span></li>
<li><span>второй пункт нумерованного списка</span></li>
<li><span>третий пункт нумерованного списка</span></li>
<li><span>четвертый пункт</span></li>
</ol>
И в CSS задать цвет для <li> фиолетовый, а для <span> - черный.
Но! Во-первых это усложняет код. Во-вторых, при использовании CMS и визуальных редакторов, этот самый тэг <span> может автоматически удаляться.
Решение:
Упрощаем HTML код:
<ol>
<li>первый пункт нумерованного списка</li>
<li>второй пункт нумерованного списка</li>
<li>третий пункт нумерованного списка</li>
<li>четвертый пункт</li>
</ol>
CSS будет приблизительно таким:
ol {
list-style-type: none;
/* Убираем исходные маркеры */
counter-reset: item;
/* Обнуляем счетчик списка */
}ol li {
color: #000;
}ol li:before {
content: counter(item) '. ';
/* Добавляем к числам точку */
counter-increment: item;
/* Задаём имя счетчика */
color: #4e00ff;
padding-right: 7px;
/* отступ для красоты */
}
Допустим, нам надо заменить точку после цифры на скобку:
Меняем просто строку content: counter(item) '. ';
на content: counter(item) ') ';