Как изменить маркер списка
Как изменить маркер списка
Рассмотрим как изменить цвет для маркеров списка, и добавить картинку с помощью CSS.
Цвет маркера списка можно изменить несколькими способами:
- Использовать тег span ;
- Использовать псевдоэлемент ::before или ::after ;
- Использовать псевдоэлемент ::marker.
- Изображение для маркера списка.
Как изменить цвет маркера списка с помощью 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; - цвет маркера
}
Пример ↓
- Snow
- Rain
- 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");
}
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями: