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

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