Чтобы строки маркированного списка как-то выделить от основного текста, можно сделать так, чтобы цвет маркеров в списке отличался от цвета текста.
По умолчанию стоит черная точка. Если просто задать цвет элементу li, то ничего не получится — цвет будет задан всей строке, а нужно изменить только цвет маркера (ul li цвет точек).
Как изменить цвет буллитов с помощью CSS
- Скрываем оригинальные маркеры списка с помощью свойства list-style-type
- Добавляем свои собственные маркеры с помощью псевдоэлемента :before и свойства content. Это позволит вставить любой текст или символ перед элементом li.
- Внешним видом маркера можно управлять через стили 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; /* Отступ от маркера до текста */
}