Как изменить маркеры списка

Короткий ответ

В list-style-type можно написать любую строку — она станет маркером:

<ul style="list-style-type: '✓ ';">
  <li>Free delivery</li>
  <li>30-day returns</li>
</ul>

Встроенные значения тоже есть: disc (точка), circle (кружок), square (квадрат).

Цвет маркера

Псевдоэлемент ::marker меняет цвет и размер маркера, не трогая текст пункта:

<style>
  li::marker { color: seagreen; font-size: 1.3em; }
</style>
 
<ul>
  <li>Tea</li>
  <li>Coffee</li>
</ul>

У ::marker работают лишь некоторые свойства: цвет, шрифт и content. Отступы и фон на него не действуют.

Полностью свой маркер

Для сложного маркера — цветного кружка, иконки, точного отступа — уберите стандартный и нарисуйте свой через ::before:

<style>
  .check { list-style: none; padding: 0; }
  .check li { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
  .check li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: seagreen; color: white; font-size: 12px; }
</style>
 
<ul class="check">
  <li>Free delivery</li>
  <li>30-day returns</li>
</ul>

Частая ошибка

Маркер-строку пишут без пробела в конце: list-style-type: '✓'. Символ прилипает к тексту пункта. Добавьте пробел внутри кавычек или задайте отступ через padding-left у <li>.