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

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

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