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!
Top comments (21)
Is compatibility with Internet Explorer still a thing? Should you also mention it is not compatible with Netscape then?
I'm sooo happy to finally live in a future where jokes like this can be made. 🥲
We still have to deal with Safari 😂😂😂
lol too true
At least we've polyfills 😄
Unfortunately, yes. Some enterprise environments that really like single-sign on continued building new, greenfield applications specifically for IE right up until Microsoft announced its EOL date. Denial and institutional inertia are a hell of a drug, and MSFT certainly didn't help matters by regularly reminding people that they were "committed to supporting IE for the life of the operating system it is installed on."
A few months ago my organization stopped making devs support IE, but making testers stop reporting issues in it is still an uphill battle every day, so knowing off the top of my head which bugs are almost certainly caused by stubborn testers refusing to use any other browser saves me a lot of time.
Damn, I am gonna try it. Thanks for the post.
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..
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 👍Thank you so much, I've learned something new today.
This is neat, thanks!
Very neat pseudo-element! Thanks for raising awareness. :)
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 :))
Very nice!
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 🙏
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.
Good Explanation