Change the marker of a list to any character with list-style-type: <string>

Since CSS Level 2, CSS list-style-type has supported keywords like disc or decimal to define the appearance of the list item marker. Landing in Chrome 79, and also available in Firefox ever since version 39, is the ability to set it to an arbitrary string.

Here’s a pen that demonstrates its behavior / usage:

Let’s hope this land in other browsers too, so that we can stop fiddling with ::before and such to achieve the same result 😉

💁‍♂️ Be sure to set this on the ul element, and not the li‘s or you’ll run into issues with nested lists.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.