CSS list-style-image Property
With the list-style-image property you can replace the default list item markers with an image of your choice.
Possible Values
- 'a URL' - the location of the image to be used as the list item marker.
- none - don't use an image.
- inherit - the value is inherited from the parent element.
The list-style-image property declaration to allocate an image named "listmarker.gif" as the list item marker would be written:
list-style-image: url(‘listmarker.gif’);
The url must be contained in brackets and the name of the image must be given in single quotes.
Here are two example lists where list-style-image has been used to replace the default marker with a green square and purple circle respectively:
list-style-image: url(‘greensquare.gif’);
- First List Item
- Second List Item
- Third List Item
list-style-image: url(‘purplecircle.gif’);
- First List Item
- Second List Item
- Third List Item
NOTE: When using list-style-image it is recommended to also provide a list-style-type declaration as a fall-back to be used if for some reason the image can't be accessed.