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-element!
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!
Latest comments (21)
Unfortunately it is not possible (for now) to change its position to align it centered/baseline to the text 😕
I really hope font-size-adjust will be compatible not only for Firefox soon 🙏
Interesting. I only get the usual bullets in Google Chrome 100.0.4896.75 running on Linux.
(Oops, sorry. I had left the comments in the CSS.)
Pretty cool, and probably we can still use the older technic as a fallback for IE &likes.
Thank you :))
I notice that a few paople are mentioning IE (11) support. Obviously, it does not support
::marker, as everyone realises, but is that REALLY a problem here?? We (my company) support IE11, but we do not expect it to render everything in the same way as modern browsers. As long as the page is still usable/understandable, then everything should be fine.::markeris a great example of this: modern browsers get the fancy markers; those stuck with non-supporting browsers get default bullet-style markers 👍Very nice!
Thank you so much, I've learned something new today.
Nice! Will try it out. I know lots of organization, including mine are still supporting IE11 to maintain legacy applications. Having said, IE11 is EOL and we can start using these new features.
I recall staring longingly at the CanIUse page for this feature a few years ago. Glad to hear it's widely implemented! Thank you for sharing!
Thanks for sharing this.
I have never tried this but will use it in my next project..
This is neat, thanks!