Как изменить цвет маркеров в списке?
Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.
Использование <span>
Внутрь каждого элемента <li> вкладываем <span>, а уже внутрь него помещаем текст. Иными словами вместо традиционной схемы
<li>текст</li>создаем конструкцию
<li><span>текст</span></li>При этом цвет маркеров определяется стилевым свойством color для селектора li, а цвет текста — для селектора span (пример 1).
Пример 1. Использование вложенных тегов
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвет текста и маркеров в списке</title> <style> li { color: red; /* Цвет маркеров */ } li span { color: green; /* Цвет текста */ } </style> </head> <body> <ul> <li><span>Скрипка</span></li> <li><span>Гитара</span></li> <li><span>Волынка</span></li> <li><span>Шарманка</span></li> <li><span>Челеста</span></li> </ul> </body> </html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Маркеры, отличающиеся по цвету от основного текста
Несмотря на простоту, метод неудобен, особенно при объёмных списках, ведь к каждому пункту списка теперь придётся добавлять <span>.
Использование ::before
Смысл в следующем — убираем оригинальные маркеры списка через свойство list-style-type и добавляем свои собственные маркеры с помощью псевдоэлемента ::before и свойства content. Такая связка позволяет вставлять любой текст или символ перед элементом, в данном случае <li>. Причём видом текста (цвет, шрифт, фон и др.) также можно управлять через стили, что и продемонстрировано в примере 2.
Пример 2. Использование псевдоэлемента ::before
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Цвет маркеров в списке</title> <style> li { list-style-type: none; /* Прячем исходные маркеры */ } li::before { color: red; /* Цвет маркера */ content: "▪"; /* Сам маркер */ padding-right: 10px; /* Расстояние от маркера до текста */ } </style> </head> <body> <ul> <li>Север</li> <li>Юг</li> <li>Запад</li> <li>Восток</li> </ul> </body> </html>
Результат данного примера показан на рис. 2.
Рис. 2. Маркеры, созданные с помощью стилей
Автор: Влад Мержевич
Источник: webref.ru