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

Пройдите тест, узнайте какой профессии подходите
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
li {
  list-style: none;
}

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

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

Пошаговый план для смены профессии

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

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

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

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

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

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

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

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

CSS
Скопировать код
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:

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

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

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

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

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

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

CSS
Скопировать код
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.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой символ Unicode используется в примере для маркера списка?
1 / 5