# CSS Emoji list style

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

Today we'll be looking at getting emoji as our list icons.
I will be using the stable method for this article. 
Tomorrow we will explore a newer method of doing just this.

The end result will be us transforming the left list into this right one.

Try it out using this Codepen.

%[https://codepen.io/rebelchris/pen/qBNmBEO]

## HTML Structure

```html
<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.

```css
.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.

```css
.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](https://daily-dev-tips.com/posts/css-pseudo-elements/) to place the content of the animal.

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

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

```css
.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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)