The list-style-image property in CSS is used to replace default list item markers with custom images. It helps create more attractive and visually appealing lists on web pages.
- Allows the use of images as bullets for list items.
- Enhances the design and creativity of unordered and ordered lists.
- Makes web content more engaging and user-friendly.
Syntax:
list-style-image: none | url | initial | inherit;Property Values:
none | This value specifies that no image is used as the marker. If this value is set, the marker defined in the list-style type is used instead. This is the default value. |
initial | This mode sets this property to its default value. |
url | In this value, the path to the image is used as a list-item marker. |
Methods to use List Style Image Property
1. Using CSS list style image property value as none:
Example: Here, we are using list-style-image: none; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS list-style-image Property
</title>
<!--Driver Code Ends-->
<style>
ul {
list-style-image: none;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style-image Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
2. Using CSS list style image property value as url:
Example: Here, we use list-style-image: url; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
CSS list-style-image Property
</title>
<!--Driver Code Ends-->
<style>
ul {
list-style-image:
url("https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
<!--Driver Code Starts-->
</head>
<body style="">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style-image Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->