Thanks to Igalia, sponsored by Bloomberg, we can finally put our hacks away for styling lists. See!

View Source

Thanks to CSS [::marker](https://www.w3.org/TR/css-lists-3/#marker-pseudo) we can change the content and some of the styles of bullets and numbers.

Browser compatibilty #

When Chromium 86 releases, ::marker will be supported in Firefox for desktop and Android, desktop Safari and iOS Safari, and Chromium-based desktop and Android browsers. See MDN’s Browser compatibility table for updates.

Pseudo-elements #

Consider the following essential HTML unordered list:

<ul>
  <li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
  <li>Dolores quaerat illo totam porro</li>
  <li>Quidem aliquid perferendis voluptates</li>
  <li>Ipsa adipisci fugit assumenda dicta voluptates nihil reprehenderit consequatur alias facilis rem</li>
  <li>Fuga</li>
</ul>

#css