How to decorate list bullets in arrow using CSS ?

Given a list of items and the task is to customize the bullet style of the list and replace it with the arrow.

Method 1: By Unicode Character

  • First, we will turn off the default bullet style of the list.
  • Then We will insert Unicode of the arrow character in the content property in the “li::before” selector.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Decorating Bullet Style</title>
  
    <!-- Internal css -->
    <style type="text/css">
          
        <!-- Element selected by id -->
        #list{
            color: green;
            background: white;
            font-size: 30px;
        }
  
        <!-- Removes default style of 
        bullet point -->
        li{
            list-style: none;
        }
  
        <!-- ::before creates a pseudo-element
        that is the first child of the 
        selected element -->
  
        li::before{
  
            <!-- Unicode for >> character -->
            content: "\00BB";
        }
    </style>
</head>
  
<body>
  
    <!-- list of elements -->
    <ul id="list">
        <li> Geeks</li>
        <li> for</li>
        <li> Geeks</li>
    </ul>
</body>
      
</html>

chevron_right


Output:

Method 2:



  • We will insert URL of the image that we want to insert in place of the default bullet styles in the “list-style-image” property.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Decorating Bullet Style</title>
  
    <!-- Internal css -->
    <style type="text/css">
          
        <!-- Element selected by id -->
        #list{
            color: green;
            width: 300px;
            font-size: 45px;
            font-family: sans-serif;
            border:2px solid black;
        }
  
        ul{
            margin: 100px 100px;
        }
  
        <!-- Adds desired image at the 
        in place of default bullets -->
        li{
            list-style-image:URL(
            list-style-position: inside;
        }
    </style>
</head>
  
<body>
  
    <!-- list of elements -->
    <ul id="list">
        <li> Geeks</li>
        <li> for</li>
        <li> Geeks</li>
    </ul>
</body>
      
</html>

chevron_right


Output:

References:

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.