Изменение цвета маркеров списка HTML без доп. элементов

Быстрый ответ

Если вы хотите быстро поменять цвет маркеров в списке, примените CSS-псевдоэлемент ::marker:

li::marker {
  color: red; /* Маркеры окрасим в красный цвет, текст останется без изменений */
}

Таким образом, вы сможете выделить маркеры новым цветом, не затрагивая текст.

Пользовательская настройка цвета маркеров через псевдоэлементы

Если вам требуется более точное управление внешним видом маркеров, можно использовать псевдоэлемент ::before:

ul {
  list-style: none; /* Отменяем стандартные маркеры */
}

li::before {
  content: '•';    /* Добавляем символ в качестве маркера, например, классическую точку */
  color: blue;     /* Задаём цвет, насыщенный как морской бриз */
  font-size: 20px; /* Устанавливаем крупный размер шрифта */
  margin-right: 8px; /* Добавляем пространство справа от маркера */
  font-family: 'Arial'; /* Выбираем шрифт для маркера */
  line-height: 1; /* Настраиваем выравнивание */
}

Вы можете убрать стандартные маркеры при помощи list-style: none и создать собственные, используя ::before.

Не забывайте о совместимости

Псевдоэлемент ::marker удобен своей простотой, но стоит учесть, что его поддержка некоторыми браузерами ограничена. Если вам важна совместимость со старыми версиями, например, с Internet Explorer, лучшим выбором будет ::before:

li::before {
  content: url('bullet.svg'); /* SVG позволяет создать стильные маркеры */
}

SVG предоставляет широкие возможности для создания маркеров. Не забывайте про правильное использование URI-кодировки.

Внешний вид оживляет код

Визуализация концепции окрашивания маркеров списков делает процесс ещё более интересным:

Исходный список:         Список с окрашенными маркерами:
- 🎈                    – 🔵🎈 Пункт 1
- 🎈                    – 🔴🎈 Пункт 2
- 🎈                    – 🟢🎈 Пункт 3

Давайте окрасим эти маркеры, не затрагивая воздушные шары:

li::marker {
    color: red; /* Маркеры красим в красный цвет, оставляя шары такими же весёлыми */
}

Просто и эффектно, не так ли? Мы смогли изменить цвет маркеров, при этом текст остался нетронутым. 🎨🖌️

Создание эксклюзивных пользовательских маркеров при помощи CSS3

Не ограничивайтесь шаблонными решениями! Добавьте уникальности вашим спискам, создав эксклюзивные маркеры. В этом помогут функции CSS3, такие как border-radius, и свойство -moz-background-clip для обеспечения кроссбраузерной поддержки:

li::first-line {
  color: #555; /* Первая строка будет выделена тёплым оттенком, маркеры оставляем нетронутыми */
}

Поиск идеального сочетания стилизации и читабельности текста поможет создать великолепный дизайн и обеспечить читабельность.

Полезные материалы

1. ::marker – CSS: Cascading Style Sheets | MDN
2. CSS Стилизация списков
3. Псевдоэлемент ::marker в CSS | Can I use... Support tables for HTML5, CSS3, etc
4. ::before / ::after | CSS-Tricks
5. javascript – Как одновременно вызвать события OnClick и OnClientClick в ASP.NET при использовании jQuery? – Stack Overflow