Как изменить маркер списка
Как изменить маркер списка
Рассмотрим как изменить цвет для маркеров списка, и добавить картинку с помощью 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;
}
- Solid
- Liquid
- 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;
}
- Snow
- Rain
- 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');
}
- Breakfast
- Lunch
- Supper
Обратите внимание, картинка будет выводиться исходного размера.
Изучаем английский
English | Russian |
---|---|
Before | До |
After | После |
Solid | Твёрдый, сплошной |
Liquid | Жидкий |
Gaseous | Газообразный |
Snow | Снег |
Rain | Дождь |
Fog | Туман |
Breakfast | Завтрак |
Lunch | Обед, второй завтрак |
Supper | Ужин |
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии
- Комментариев пока нет.