Маркеры

::marker — это ещё один псевдоэлемент, который может использовать свойство content, подобно ::before и ::after. Он применяется для стилизации маркеров пунктов списка.

HTML

<ul>
  <li>Cupcakes are essentially cakes, but cuppier.</li>
  <li>The first cupcake was invented by Harley McCupcakken in 1796.</li>
  <li>Alright fine, I don't actually know anything about cupcakes.</li>
</ul>

CSS

li::marker {
  content: '🧁';
}

See the Pen Cupcake Markers with ::marker by Will Boyd (@lonekorean) on CodePen.

К сожалению, Safari не позволяет устанавливать content для ::marker, а браузеры, которые позволяют это делать, имеют другие ограничения.

Другой вариант — полностью скрыть маркеры с помощью list-style-type: none, а затем использовать ::before, чтобы сделать что-то своё. Для примера я воссоздал предыдущую демонстрацию, используя ::before вместо ::marker.