CSS Tips - Custom list styles with @counter-style #css

A quick tip on using @counter-style CSS at-rule to change list bullet points into emojis, using "system," "symbols," and "suffix" descriptors.

Codepen demo:

Subscribe to CSS Weekly Newsletter:

Course Mastering Prettier & Stylelint
🏷️ Use coupon code YOUTUBE25 to get an additional 25% off on the already discounted pre-launch price.

Keep up-to-date with CSS Weekly:

Keep up to date with what I'm up to:

- Zoran Jambor
#css #csstutorials

[ahmad-murery]

Of course this is not an alternative way to add icons to your list items, you simply delete/move one item and all your emojis are now assigned to different items.
Reminder for the future me, keep in mind that this is a counter style not an icon set.

Thanks Zoran!