DEV Community

Cover image for Use Unicode characters for bullet points in CSS using ::marker
Cassidy Williams
Cassidy Williams

Posted on • Edited on • Originally published at cassidoo.co

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"; }
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
roelroel profile image
Roel de Brouwer

Is compatibility with Internet Explorer still a thing? Should you also mention it is not compatible with Netscape then?

Collapse
 
devwillis profile image
David Willis

I'm sooo happy to finally live in a future where jokes like this can be made. 🥲

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

We still have to deal with Safari 😂😂😂

Thread Thread
 
devwillis profile image
David Willis

lol too true

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

At least we've polyfills 😄

Collapse
 
webbureaucrat profile image
webbureaucrat

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.

Collapse
 
kevincp17 profile image
kevincp17

Damn, I am gonna try it. Thanks for the post.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
webbureaucrat profile image
webbureaucrat

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!

Collapse
 
capscode profile image
capscode

Thanks for sharing this.
I have never tried this but will use it in my next project..

Collapse
 
jackplug profile image
Stuart Homfray

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.

::marker is a great example of this: modern browsers get the fancy markers; those stuck with non-supporting browsers get default bullet-style markers 👍

Collapse
 
vfcc profile image
vfcc

Thank you so much, I've learned something new today.

Collapse
 
pablowbk profile image
Pablo

This is neat, thanks!

Collapse
 
b1u3too profile image
Andrea "Ando" Madsen

Very neat pseudo-element! Thanks for raising awareness. :)

Collapse
 
russellbateman profile image
Russell Bateman

Interesting. I only get the usual bullets in Google Chrome 100.0.4896.75 running on Linux.

Collapse
 
russellbateman profile image
Russell Bateman

(Oops, sorry. I had left the comments in the CSS.)

Collapse
 
netlancer profile image
Ellie

Pretty cool, and probably we can still use the older technic as a fallback for IE &likes.
Thank you :))