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

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

Цвет маркера списка можно изменить несколькими способами:
- обернуть содержимое списка в тег span и стилизовать;
- добавить псевдоэлемент ::before или ::after и стилизовать.

Первый вариант, используя тег 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;
}
  1. Solid
  2. Liquid
  3. Gaseous

Второй вариант, используя псевдоэлемент ::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: ' ' - указываем символ маркера, который хотим вывести перед элементом списка

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

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

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

Обратите внимание, картинка будет выводиться исходного размера

Изучаем английский
English Russian
Before До
After После
Solid Твёрдый, сплошной
Liquid Жидкий
Gaseous Газообразный
Snow Снег
Rain Дождь
Fog Туман
Breakfast Завтрак
Lunch Обед, второй завтрак
Supper Ужин