Subscribe

CSS list style with Emojis

✍️

Learn how to create an HTML list with emojis as bullets using the list-style property. See the example code in the Codepen!

2 Nov, 2020 Β· 3 min read

As you may have seen throughout my articles, I'm a big fan of Emojis.

Today we'll learn how to add Emojis to an HTML list to replace the bullet points with CSS. I will be using the stable method for this article. Tomorrow we will explore a newer method of doing the same.

The end result in comparison will be an unordered list with bullets transformed into an unordered list with emojis instead of bullets.

See the code example in this Codepen

Try out the CSS code using this Codepen:

See the Pen CSS Emoji list style by Chris Bongers (@rebelchris) on CodePen.

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 we create the same HTML list twice. Only the second one has a class styled.

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

CSS Emoji list-style

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

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 an indent on the left where we can use the before selector to showcase our emoji instead of a bullet.

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

And the third and final step is to add the Emoji.

We are using the before selector to place the content CSS property with an Emoji as the list style content.

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

We can now use the nth-child selector with the li elements to replace the other bullets with Emojis:

.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 is a way cooler list! So this is how to create a list in HTML with a list-style of Emojis.

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

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

CSS Logos: Figma logo

29 Mar, 2022 Β· 3 min read

CSS Logos: Figma logo

CSS art sucks

28 Mar, 2022 Β· 3 min read

CSS art sucks

Join 1371 devs and subscribe to my newsletter