In this chapter you will learn:
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-
About list-style-image property
Values of this property
Example of this property
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:-
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-