Как изменить цвет маркеров в списке?

Существует два популярных способа изменения цвета маркеров, чтобы они отличались от цвета текста.

Использование <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