In this article, we have given some list items and the task is to create a list items with image bullets. This task can be done by using the list-style-image property in CSS. This property is used to set the image that will be used as the list item marker.
Syntax:
list-style-image: url;
Example: Below code illustrates that how to create image bullets using css.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create an image bullets in HTML?
</title>
<style>
ul {
list-style-image: url(
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
How to create an image bullets in HTML?
</h2>
<p>List of fruits</p>
<ul>
<li>apple</li>
<li>mango</li>
<li>banana</li>
<li>grapes</li>
<li>papaya</li>
</ul>
</body>
</html>
|
Output
Supported Browsers are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
12 Jan, 2021
Like Article
Save Article