Use Unicode characters for bullet points in CSS using ::marker
source link: https://dev.to/cassidoo/use-unicode-characters-for-bullet-points-in-css-using-marker-3bnj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK