Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add an image as the list-item marker in a list using CSS?
CSS allows you to replace the default bullet points in lists with custom images using the list-style-image property. This creates visually appealing lists that match your website's design theme.
Syntax
selector {
list-style-image: none | url(image-path) | initial | inherit;
}
Possible Values
| Value | Description |
|---|---|
none |
No image is used (default behavior) |
url() |
Specifies the path to the image file |
initial |
Sets the property to its default value |
inherit |
Inherits the value from the parent element |
Example: Custom Image as List Marker
The following example demonstrates how to use a custom image as list markers
<!DOCTYPE html>
<html>
<head>
<style>
.custom-list {
list-style-image: url("/css/images/arrow-right.png");
padding-left: 30px;
line-height: 2;
}
.custom-list li {
margin-bottom: 10px;
color: #333;
}
h3 {
color: #2c3e50;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h3>Programming Languages</h3>
<ul class="custom-list">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>CSS</li>
</ul>
</body>
</html>
A list appears with custom arrow images instead of default bullet points. Each list item shows programming languages with right-pointing arrow markers and proper spacing.
Example: Fallback with list-style-type
You can combine list-style-image with list-style-type as a fallback
<!DOCTYPE html>
<html>
<head>
<style>
.fallback-list {
list-style-image: url("/css/images/star.png");
list-style-type: disc;
padding-left: 25px;
line-height: 1.8;
}
.fallback-list li {
color: #555;
font-size: 16px;
}
</style>
</head>
<body>
<h3>Features</h3>
<ul class="fallback-list">
<li>Responsive Design</li>
<li>Cross-browser Support</li>
<li>Fast Loading</li>
</ul>
</body>
</html>
A list displays with star images as markers. If the image fails to load, disc-style bullets appear as fallback markers.
Conclusion
The list-style-image property provides an easy way to customize list markers with images. Always include a fallback list-style-type to ensure proper display if images fail to load.
Updated on: 2026-03-15T16:30:19+05:30
1K+ Views
Advertisements