How to add an image as the list-item marker in a list using CSS ?
The approach of this article is to learn how to add an image as the list-item marker in a list using list-style-image Property in CSS.
Syntax:
list-style-image: none | url | initial | inherit;
Example:
<!DOCTYPE html> < html > < head > < style > ul { list-style-image: url( "https://write.w3wiki.net/wp-content/uploads/listitem-1.png"); } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > How to add an image as the list-item marker in a list using CSS? </ h2 > < p >Programming Languages</ p > < ul > < li >c++</ li > < li >Java</ li > < li >PHP</ li > < li >python</ li > </ ul > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Contact Us