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