CSS List-Style-Image Property

In this chapter you will learn:
About list-style-image property
Values of this property
Example of this property
CSS list-style-image property is used to specify the bullet of the list as an image. You can display any type of image to replace default bullets of the list. This property helps to make the web page more attractive and impressive-
Syntax- list-style-image:value; Values of this property-  
Values Description
none This is the default value of list-style-image which specify that no image is used for list style.
url Used to specify the path or location of image
initial Specify the default value of the property

Example of this property-
<html>
<head>
    <title>Example of list-style-image property</title>
    <style type="text/css">
    #a
    {
   list-style-image:url('arrow.png');/* here arrow.png is the name of image so you can use any other image. */
    }
  
    </style>
    </head>
<body>
<ul id="a">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>

Guide:- When you will run the given code you will get that the arrow image will appear before all list and bullet has replaced.
Output:-
example of list-style-image

Summary

In this chapter, you have learned about the list-style-image property so now try to use this property in your own program and click on Next button to continue-

More Articles

 

Share your thought



PLEASE DISABLE ADBLOCKER AND SUPPORT US!

Please support us by enabling ads on this page. Refresh

YOU DON'T LIKE ADS, WE ALSO DON'T LIKE ADS!
 
But we have to show ads on our site to keep it free and updated. We have to pay huge server costs, domain costs, CDN Costs, Developer Costs, Electricity and Internet Bill. Your little contribution will encourage us to regularly update this site.