Как изменить цвет маркеров списков
Узнайте, как изменить цвет маркеров для списков с помощью CSS.
Изменить цвет пули
- Адель
- Агнес
- Билли
- Боб
Шаг 1) Добавьте HTML:
Создайте базовый список:
Пример
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
Шаг 2) Добавьте CSS:
По умолчанию невозможно изменить цвет маркера элемента списка. Тем не менее, вы можете использовать некоторые приемы CSS, чтобы сделать это возможным. Обратите внимание, что вам, возможно, придется немного изменить его, если вы используете структуру CSS или специальную таблицу стилей:
Пример
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}