CSS Emoji list style

Hey Dinys,

You could technically do this yes, but keep in mind the content will then also contain these icons.

The emojis are of course an example of what you could add as custom list items.

In this case, the result would be exactly the same having them directly in HTML, but considering SEO and Styling options this gives us more options to play with.

HTML Structure

<div> <h1>The big five!</h1> <ul> <li>Lion</li> <li>Leopard</li> <li>Rhino</li> <li>Elephant</li> <li>Buffalo</li> </ul> </div> <div> <h1>The big five!</h1> <ul class="styled"> <li>Lion</li> <li>Leopard</li> <li>Rhino</li> <li>Elephant</li> <li>Buffalo</li> </ul> </div>

As you can see twice the same list, only the second one has a class styled.

Now we want to make the difference between a boring list and a cool emoji list!.

CSS Emoji list-style

To get the emoji list-style we first will remove the actual styling from the list.

The list-style: none will remove the default bullets and then we set the padding and margin to be zero.

.styled { list-style: none; padding: 0; margin: 0; }

The next step is to give the list items some space.

This will give us a indent on the left where we can use the before selector to showcase our emoji.

.styled li { padding-left: 1rem; text-indent: -0.75rem; }

And the third and final step to showcase the emoji.

We are using the before selector to place the content of the animal.

.styled li::before { content: "🦁 "; }

We can now use the nth-child selector to do the other animals.

.styled li:nth-child(2)::before { content: "🐆 "; } .styled li:nth-child(3)::before { content: "🦏 "; } .styled li:nth-child(4)::before { content: "🐘 "; } .styled li:nth-child(5)::before { content: "🐃 "; }

That's is a way cooler list!

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

CSS Emoji list style

Comments (1)

More from this blog

I wrote 1000 articles, what’s next?

Vendure community and more

Deploying Vendure

Vendure - Overwriting email templates

Customizing vendure

HTML Structure