Use Unicode characters for bullet points in CSS using ::marker

I was playing around with making some <ul>s on an HTML page recently, and typically when I want to replace the bullet points with an emoji or an SVG or something, I'll write something like:

ul { list-style-type: none; }ul li:before { content:"\2713"; }

And this works, but for longer lines of text, you get some spacing issues. You can fix it by changing the padding around the list and messing with the positioning, but that's a lot of trial and error.

Enter, the ::marker psuedo-selector!

This is a really cool, relatively new option to solve our problem! It selects the marker box of a list item (so the bullet, or a number if you're using ol), and you can change the font properties, the color, and some other things around it!

Demo:

It's not fully compatible with Internet Explorer, and some other older versions of modern browsers. You can check the compatibility table here, and the documentation for it here!