Skip to content
Related Articles

Related Articles

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

Output:

References:

My Personal Notes arrow_drop_up
Recommended Articles
Page :