DEV Community

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

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

Cassidy Williams on April 07, 2022

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...
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 :))

Collapse
 
greensleeves01 profile image
VidelicetWDC

Very nice!

Collapse
 
yuridevat profile image
Julia 👩🏻‍💻 GDE

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 🙏

Collapse
 
getsetgopi profile image
GP

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.

Collapse
 
braincuber_technologies profile image
Braincuber Technologies

Good Explanation