Как изменить маркер списка

Рассмотрим как изменить цвет для маркеров списка, и добавить картинку с помощью CSS.

Цвет маркера списка можно изменить несколькими способами:

  1. Использовать тег span ;
  2. Использовать псевдоэлемент ::before или ::after ;
  3. Использовать псевдоэлемент ::marker.
  4. Изображение для маркера списка.

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

1. Используя тег span:

<ol>
    <li><span>Solid</span></li>
    <li><span>Liquid</span></li>
    <li><span>Gaseous</span></li>
</ol>
li {
    color:#f16092;
}
li span {
    color:#214133;
}

Пример ↓

  • Solid
  • Liquid
  • Gaseous

2. Используя псевдоэлемент ::before:

<ol>
    <li>Snow</li>
    <li>Rain</li>
    <li>Fog</li>
</ol>
li {
    color:#214133;
    list-style-type: none;
}
li::before {
    content: "❤"; - символ маркера
    color:#f16092; - цвет маркера
}

Пример ↓

  1. Snow
  2. Rain
  3. Fog
  • list-style-type: none; - отменяем стандартный маркер,
  • content: " "; - указываем символ маркера, который хотим вывести перед элементом списка.

3. Маркер списка при помощи псевдоэлемента ::marker.

li::marker {
    color: lightgreen;
    font-size: 14.5px;
}

Картинка для маркера списка

Чтобы заменить маркеры списка на изображения воспользуемся свойством list-style-image.

<ul>
    <li>Breakfast</li>
    <li>Lunch</li>
    <li>Supper</li>
</ul>
ul {
    list-style-image: url("path/img.png");
}