How to decorate list bullets in arrow using CSS ?

Last Updated : 22 Apr, 2020

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:

<!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> 

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:

<!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( 
'https://media.geeksforgeeks.org/wp-content/uploads/20200331172037/image47.png'); 
            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> 