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

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

Использование <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. Маркеры, созданные с помощью стилей

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 20.09.2018
Редакторы: Влад Мержевич