Создание пользовательских маркеров в HTML с CSS: символ +

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

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

ul.no-bullets {
    list-style-type: none;
    padding-left: 0;
}

li.custom-bullet::before {
    content: '•';
    padding-right: 5px;
}

li {
    margin-left: 20px;
}

<ul class="no-bullets">
    <li class="custom-bullet">Элемент 1</li>
    <li class="custom-bullet">Элемент 2</li>
</ul>

Вы можете заменить символ '•' на любой другой символ, например с использованием эмодзи или специальных значков. Достаточно подстроить padding-right и margin-left для нужного расстояния между элементами.

Профессиональное оформление маркеров: сложные настройки

Контекстно-зависимые маркеры с использованием эмодзи или специальных символов

Если требуются специальные маркеры, коррелирующие с вашим контентом или дизайном, вы можете использовать эмодзи или предопределённые символы, чтобы придать списку уникальность и визуальный стиль.

li.custom-emoji::before {
    content: '🚀';
    margin-right: 8px;
}

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

Точное выравнивание маркеров с позиционированием

Для строгого выравнивания маркеров применяйте position: relative для <ul> и position: absolute для ::before:

ul {
  position: relative;
}

li::before {
  position: absolute;
  left: 0;
  top: 0;
}

Висячий отступ с отрицательным text-indent

Если вы хотите предотвратить разрыв между текстом и маркером, используйте отрицательный text-indent для создания эффекта висячего отступа:

li {
    text-indent: -5px;
}

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

Список до внесения изменений

Обычный список (🃏): 
  [Туз, Король, Дама, Валет]

Преобразуем обыкновенный список в захватывающую колоду карт с помощью стилевых изменений.

Список после внесения изменений

<ul style="list-style-type: '♣️ ';">
  <li>Туз</li>
  <li>Король</li>
  <li>Дама</li>
  <li>Валет</li>
</ul>

Теперь каждый элемент <li> – это карта в колоде, отмеченная соответствующей мастью:

Список с маркировкой (♣️): 
  [Туз ♣️, Король ♣️, Дама ♣️, Валет ♣️]

Выравнивание текста с абсолютно позиционированными маркерами

Для визуальной гармонии с абсолютно позиционированными маркерами используйте padding-left для корректного выравнивания текста:

li {
    padding-left: 20px; 
}

Использование веб-шрифтов для создания иконок-маркеров

Веб-шрифты, такие как Font Awesome, предлагают большой выбор графических символов, которые легко масштабируются и удобны в использовании.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

li::before {
    font-family: 'Font Awesome 5 Free';
    content: '\f00c';
}

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

1. ::marker – CSS: Cascading Style Sheets | MDN — детальная документация о псевдоэлементе ::marker, который можно использовать для стилизации списков в CSS.
2. list-style | CSS-Tricks – CSS-Tricks — исчерпывающая инструкция о стилизации списков с помощью CSS-свойства list-style.
3. Оформление списков в CSS — доступный урок о том, как с помощью CSS можно оформить списки.
4. Выбор иконок для создания уникального маркированного списка | Font Awesome — обширная коллекция шрифтовых иконок для создания уникальных маркеров.
5. Псевдоэлементы – CSS: Cascading Style Sheets | MDN — всесторонний обзор псевдоэлементов в CSS, пригодных для углублённого оформления списков.
6. "::marker" | Can I use... Support tables for HTML5, CSS3, etc — таблицы поддержки, позволяющие проверить, как браузеры работают с псевдоэлементом ::marker.