Open In App

How to apply emoji hex code in list-style type to create custom list point ?

Improve
Improve
Like Article
Like
Save
Share
Report

You can pass emoji hex code in list-style-type for both ordered and unordered lists to create custom list points.

We use the following syntax in the CSS.  You need to write the hex code for emojis in your CSS list-style-type property. You can refer to the HTML emojis article to know the hex code for emojis. 

Syntax:

ul,
ol {
    list-style-type: "\write correct hex code";
}

After using this style our list will not start with numbers, but it will be replaced with emojis.

Note: You need to insert “\” before every hex code.

Example 1: Here is the implementation of the above-explained method.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
 
    <style>
        ul {
            list-style-type: "\231B";
        }
 
        ol {
            list-style-type: "\1F604";
        }
    </style>
</head>
 
<body>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
    <ol>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ol>
</body>
</html>


Output:

Example 2: Here is the basic example of using list-style-type.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
     
    <style>
        ul
        {
            list-style-type: "\270D";
        }
        ol
        {
            list-style-type: "\2705";
        }
    </style>
</head>
<body>
    <ul>
        <li>geeks</li>
        <li>for</li>
        <li>geeks</li>
    </ul>
    <ol>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
    </ol>
</body>
</html>


Output:



Last Updated : 10 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads