Как средствами CSS изменить цвет маркера html-списка

Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.

По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).

Как изменить цвет буллитов с помощью CSS

1. Скрываем оригинальные маркеры списка с помощью свойства list-style-type
2. Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Это позволит вставить любой текст или символ перед элементом li.
3. Внешним видом маркера можно управлять через стили CSS, изменяя цвет, шрифт, фон и другое. Я использовал жирное начертание шрифта Монтсеррат.

li {
list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */
}

li:before {
 font-family: 'Montserrat', sans-serif;
 font-weight: 400;
 color: #d7002e; /* Цвет маркера */
 content: "•"; /* Маркер */
 padding-right: 7px; /* Отступ от маркера до текста */
}

Если у вас возникла ситуация, когда маркеры появились в ненужных местах, например в главном меню или в дублирующем меню в футере, то это можно легко исправить. Просто допишите родительский элемент, в котором находятся списки, цвет маркеров которых нам надо изменить. Я добавил слово article и теперь эти изменения стали относиться только к контентной области сайта.

article li {
list-style-type: none; /* Скрываем маркеры, отображаемые по умолчанию */
}

article li:before {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
color: #d7002e; /* Цвет маркера */
content: "•"; /* Маркер */
padding-right: 7px; /* Отступ от маркера до текста */
}