Замена маркеров в HTML списке на символ ✓ : CSS решение

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

Если вы хотите использовать галочку вместо стандартных маркеров в списках, воспользуйтесь свойствами CSS. Сначала уберите обычные маркеры, применив list-style-type: none;, затем добавьте галочку перед текстом списка с помощью псевдоэлемента ::before.

ul.no-bullets li::before {
  content: '✓';
}

Прикрепите класс no-bullets к списку в своём HTML-коде:

<ul class="no-bullets">
  <li>Первая задача: Всегда быть в готовности</li>
  <li>Вторая задача: Соблюдать установленные стандарты</li>
</ul>

С этого момента каждый элемент списка будет помечен галочкой вместо обычного маркера.

Создание пространства и стилизация

Не забывайте о значимости пространства в дизайне. Подходящее расстояние между галочкой и текстом повышает читаемость. Используйте Unicode-символы \2713 или \2714, добавляя после них пробельный символ Unicode \0020:

ul.no-bullets li::before {
  content: '\2713\0020'; 
}

Также можно настроить цвет и вес шрифта галочки с помощью соответствующих CSS-свойств:

ul.no-bullets li::before {
  content: '\2713\0020';
  color: green; /* Зелёный цвет всегда будет уместным */
  font-weight: bold; /* Выражайтесь более декларативно */
}

Таким образом, ваш список станет не только функциональным, но и визуально привлекательным.

Абсолютное позиционирование: коррекция положения галочки

Абсолютное позиционирование позволяет вам иметь больше контроля над положением галочки. Оставьте место для галочки, увеличив отступ у элементов списка:

ul.positioned-ticks {
  list-style: none;
  padding-left: 30px; /* Увеличиваем пространство для манёвра */
}

ul.positioned-ticks li {
  position: relative;
}

Теперь давайте применим абсолютное позиционирование к псевдоэлементу ::before, чтобы галочка занимала нужное положение:

ul.positioned-ticks li::before {
  content: '\2714'; 
  position: absolute;
  left: 0; 
  top: 0;
}

Добавляем в дело SVG

Для большей контролируемости и гибкости галочки можно использовать SVG-иконки. Это поможет лучше адаптировать символ к дизайну сайта и обеспечит отличное отображение на всех размерах экранов:

ul.svg-ticks li::before {
  content: url('path/to/tick-icon.svg');
  padding-right: 8px; /* Защитаем достаточное пространство для текста */
}

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

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

1. list-style – CSS: Cascading Style Sheets | MDN — подробное руководство по стилизации списков с помощью CSS.
2. ::before / ::after | CSS-Tricks – CSS-Tricks — внесите магию в CSS с помощью псевдоэлементов ::before и ::after.
3. Unicode Character 'CHECK MARK' (U+2713) — узнайте больше о различных вариантах использования Unicode-символа галочки.
4. CSS Styling Lists — гид по стилизации списков с использованием CSS.
5. Circle Check Icon | Font Awesome — иконка галочки в круге от Font Awesome может стать прекрасным выбором для маркера списка.
6. HTML Lists — всё о создании списков в HTML с возможностями настройки.
7. CSS Content Property — руководство по применению свойства CSS content для вставки содержимого, включая Unicode-символы.