Custom bullet in list style css

 

If you want to add your own custom images and bullet style, so below is a code that will help you to add extra effect on your list style bullet points.

CSS Code

 
    .bullet-point li{
     position:relative; 
        padding-left:20px;
    }
 .bullet-point li:before{
     position:absolute; 
        width:7px; 
        height:7px; 
        content:""; 
        background-color:#59d4dc; 
        border-radius:7px; 
        left:0; 
        top:12px;
    }
    

HTML Code

 
    <ul class="bullet-point">
     <li>list1</li>
        <li>list2</li>
        <li>list3</li>
        <li>list4</li>
    </ul>
    

You Can also give the background image in place of background color. So it will look like this.

CSS Code

 
    .bullet-point li{
     position:relative; 
        padding-left:20px;
    }
 .bullet-point li:before{
     position:absolute; 
        width:7px; 
        height:7px; 
        content:""; 
        background:url('img/biullet.png') no-repeat; 
        border-radius:7px; 
        left:0; 
        top:12px;
    }