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:

1. Using :before pseudo-element
2. 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:

Read more about @counter-style here: @counter-style | MDN - Mozilla

---

Related Topics:

How to remove bullets from an unordered list using CSS

How to create a horizontal list using HTML and CSS

Make a collapsible list in html without JavaScript