Как сменить цвет маркера списка в HTML без изображения

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

Для того чтобы изменить цвет маркера в списке HTML, добавьте стиль CSS с псевдоэлементом ::before. Сначала уберите стандартные маркеры у элемента <ul>, используя list-style-type: none. Затем с помощью ::before задайте свой маркер, определив его цвет через color и форму через content. Рассмотрим пример кода:

ul {
  list-style-type: none; // Удаление стандартных маркеров.
}
li::before {
  content: '•'; // Задание нового маркера.
  color: red;  // Выбор цвета маркера.
  padding-right: 8px; // Дистанция до текста.
}

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

Погружение: Расширенные стили маркеров списка

Создание пользовательских стилей маркеров с использованием ::before

Раскрасим наши списки, используя в качестве маркеров символы Юникода или эмодзи:

li::before {
  content: '\1F539'; /* Почему бы не внести разнообразие и использовать 🔹! */
  color: blue;    /* Подтон цвета. */
  font-size: 20px; /* Подходящий размер маркера. */
  vertical-align: middle; /* Медиальное выравнивание. */
  padding-right: 10px; /* Расстояние до текста. */
}

Подробнее об этом расскажет наш спикер на видео

Позиционирование и выравнивание маркеров

Позиционирование и выравнивание – это важные аспекты в работе с маркерами. Настройте ::before так, чтобы он идеально совмещался с текстовой строкой:

li::before {
  content: '⚪';       /* Обновление стиля маркера. */
  color: green;      /* Оттенок маркера. */
  display: inline-block; /* Вертикальное выравнивание. */
  width: 10px; /* Подходящий размер маркера. */
  margin-left: -20px; /* Позиция слева. */
  text-align: center; /* Центрирование маркера. */
}

Изменение внешнего вида текста

Для добавления акцентов в тексте списков, оберните его в тег <span> и примените к нему соответствующие стили:

li span {
  color: black;  /* Цвет текста. */
  font-weight: bold; /* Жирность текста. */
}

Создание идеальных маркеров без изображений

Забудьте о графических маркерах. Применяйте CSS и соблюдайте правила доступности. Это гибкий и легкоподдерживаемый подход:

li::before {
  content: '•';   /* Классический стиль. */
  color: purple;  /* Оттенок маркера. */
  font-size: inherit; /* Соответствие размера текста. */
}

Визуализация

Элементы списка, подобно хамелеонам, могут быстро преобразовываться:

Хамелеон – элемент списка
До: [🤵🏻⚫]
После: [🤵🏻🟠]

С помощью обычного CSS мы меняем внешний вид текста как одежду, но часто забываем о маркере, который может служить акцентом, подобно галстуку:

li {
  color: blue; /* Оттенок текста 🎵, но маркер остаётся без изменений. */
}

Однако, используя ::marker, мы можем легко изменить цвет маркера на желанный, например, ярко-оранжевый:

li::marker {
  color: orange; /* Освежаем гамму 🍊 */
}

Получается, что список теперь содержит элементы, как хамелеоны, похожие на их новый ярко-оранжевый галстук 🟠!

Цвета в списках: Размышления об использовании

Выделение важности через цвета маркеров

С помощью цвета маркеров можно передать значимость элементов списка:

li.important::before {
  color: gold; /* Золотой маркер – идеал для важных вещей. */
}

Улучшение читабельности списков

При работе с длинными списками или множеством деталей, для повышения удобства чтения, используйте CSS-свойства, такие как line-height и margin-bottom:

li {
  line-height: 1.6;  /* Улучшение визуальной простоты восприятия. */
  margin-bottom: 5px; /* Добавление пространства между элементами. */
}

Совместимость с браузерами

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

li::before {
  content: '•'; /* Симпле вне времени! */
  color: red; /* В Индии точка как маркер означает изменение. */
}

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

1. ::marker – CSS: Cascading Style Sheets | MDN — Подробное руководство по псевдоэлементу ::marker.
2. list-style | CSS-Tricks – CSS-Tricks — Всё о свойстве list-style в CSS.
3. CSS Pseudo-elements — Учебник по работе с CSS-псевдоэлементами: создаем чудеса на страницах!
4. list-style | Codrops — Создание уникальных стилей списков при помощи CSS.
5. HTML ul tag — Основы работы с HTML тегами ul и ol.
6. Lists | HTML Dog — Пошаговое изучение списков в HTML.