Use emoji as list bullet points using CSS list-style

In this article, we will see how to style list bullet points with emoji in HTML.

In HTML the available list styles are very limited and sometimes it may make the list look boring.

So, how to make our old HTML bullet points a little bit more interesting? The answer is adding Emojis.

So, here in this post, we will see how to replace the bullet points with Emojis using CSS.

We can add emoji using to list-style using:

Using :before pseudo-element
using @counter-style CSS rule

Using `:before` pseudo-element

We have to use the :before element to replace the disc bullet point style with an emoji.

First we have to set the parent, <ul> or <ol> list-style property to none, list-style:none and then setting the margin and padding to 0px.

Next, to add the emoji icons before the list items we will use the content property on :before pseudo-element on the <li> tag.

Example:

ul{
    margin:0px;
    padding:0px
}

ul li{
    list-style:none;
}

ul li:before{
    content: '👉'
}

Result:

You can also select different emojis for different list items using the nth-child selector like this

ul li:before{
  content: '👉'
}
li:nth-child(2)::before {
  content: '🔎 ';
}
li:nth-child(3)::before {
  content: '🗯 ';
}

Result:

Using `@counter-style` to create emoji list bullet point

The @counter-style CSS at-rule allows you to create/define a custom counter-style that is not a part of a pre-defined set of styles.

It takes in three properties: 1. system, 2. symbols, and 3. suffix

system: It lets you specify the algorithm to convert the integer value into a string representation. It accepts the following values:

cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]

symbols: These are the Unicode code points to represent the emojis. You can add multiple space-separated sets of symbols. Get the List of Unicode codes of Emoji.

suffix: Any character you want to appear after the counter and before the text. We will keep it blank space (” “) here.

Example:

@counter-style emoji-bullets {
  system: cyclic;
  symbols: "1F680""1F436""1F60E";
  suffix: " ";
}

/* Add this class to the ul or ol element */
ul li {
  list-style-type: emoji-bullets;
}

Result: