Использование символа Unicode в качестве маркера в CSS

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

Чтобы использовать символы Unicode в качестве маркеров списков в CSS, следует сначала убрать стандартные маркеры, задав элементам <li> свойство list-style: none;. Затем необходимый символ Unicode добавляется через li::before { content: "<unicode>"; }. Например, чтобы использовать звезду ✦ (Unicode U+2726), следует сделать так:

li {
  list-style: none;
}

li::before {
  content: "\2726";  /* Здесь указывается нужный символ Unicode */
  margin-right: 8px; /* Позволяет добавить немного пространства */
}

Приведенное выше решение добавляет стильное оформление к каждому элементу списка, при этом его можно легко кастомизировать, подобрав другой символ Unicode или настроив отступы.

Решаем проблемы кроссбраузерности

Не все браузеры одинаково поддерживают новые функции Unicode. Чтобы обеспечить согласованное отображение в различных браузерах, следует использовать условные комментарии для обращения к старым версиям IE:

<!--[if lte IE 8]>
    <style type="text/css">
      /* Стили для старых версий браузеров */
      li:before {
        /* Альтернативная реализация */
      }
    </style>
<![endif]-->

Если в браузере отключены скрипты, используйте элемент <noscript> со стилями для обычных маркеров:

<noscript>
  <style>
    ul {
      list-style-type: disc; /* Классическое оформление */
    }
  </style>
</noscript>

Для обеспечения четкого и точного отображения маркеров списка на различных устройствах предпочтительнее пользоваться текстовыми символами, а не изображениями, поскольку такое решение обеспечивает лучшее качество и сокращает количество HTTP-запросов.

Оптимальное оформление и выравнивание

Чтобы список выглядел профессионально, обеспечьте идеальное визуальное выравнивание маркеров. Особенно обратите внимание на вложенные списки и длинные строки. Используйте padding, margin и position: absolute, чтобы маркеры всегда находились на своем месте:

li::before {
  content: "\2726"; /* Задаем символ Unicode */
  padding-right: 8px; /* Добавляем пространство для текста */
  float: left; /* Выравниваем блок по верхнему краю первой строки текста */
  position: absolute;
  left: 0;
}

li {
  list-style: none;
  padding-left: 20px; /* Смещаем текст вправо */
  position: relative;
}

Чтобы размер маркеров был однородным для всех элементов списка, используйте размер в пикселях вместо относительных единиц em.

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

Ниже приведен пример оформления HTML-списка с маркерами символов Unicode:

Обычный список:              Список с пользовательскими маркерами:
- Яблоки                      – 🌟 Яблоки
- Апельсины                   – 🌟 Апельсины
- Бананы                      – 🌟 Бананы

Список с Единорогами (🦄) придает дизайну особую магию:

ul.unicorn-list > li::before {
  content: '🦄\00A0'; /* Используем единорога в роли маркера, за символом следует пробел */
}

Теперь каждый элемент списка привлечет внимание благодаря магическому 🦄 единорогу!

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

Цвет и шрифтовое оформление маркеров

Экспериментируйте с шрифтами и цветами, чтобы сделать маркеры символов Unicode еще более выразительными. Меняйте цвет с помощью свойства color и выбирайте шрифты, которые подчеркивают красоту символов Unicode:

li::before {
  content: "\2726";
  color: #5A5A5A; /* 50 оттенков серого для маркеров */
  font-size: 1.2em; /* Подгоняем размер под необходимые параметры */
  font-family: 'CustomFont', sans-serif; /* Используем, только если этот шрифт поддерживает заданный символ */
}

На пути к продвинутому стилю пользовательских маркеров

Для создания современных и стильных списков изучите модуль CSS3 для списков и освойте продвинутые техники стилизации. Следите за черновыми версиями спецификаций CSS, касающихся маркеров списков, чтобы быть в курсе последних нововведений.

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

1. ::before / ::after | CSS-Tricks — Изучите селектор ::before для создания стильных маркеров.
2. CSS ::marker Selector — Вся информация о псевдоэлементе CSS ::marker.
3. ::before – CSS: Cascading Style Sheets | MDN — Подробное описание псевдоэлемента ::before от MDN.
4. Using CSS counters – CSS: Cascading Style Sheets | MDN — Мастер-класс по счетчикам в CSS для создания уникальных маркеров.
5. CSS Lists and Counters Module Level 3 — Проект спецификаций W3C для CSS списков и счетчиков.
6. CSS list-style-type Property – CSS Portal — Обзор свойства list-style-type.