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

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

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