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

Рассмотрим как изменить цвет для маркеров списка, и добавить картинку с помощью 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>

CSS:

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

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