list-style-image (CSS property)

September 3, 2014

Write powerful, clean and maintainable JavaScript.

~~RRP $11.95~~

Description

This property specifies the image to use as a list marker for an item in a list (an element whose display property has the value list-item). If the specified image is available, it will replace any marker specified by the list-style-type property.

The exact position of the list marker image can’t be specified beyond what the list-style-position property allows.

Example

This style rule assigns an image as the list marker for all items in the list with ID "links":

#links li {
  list-style-image:
  ➥    url("/images/link.png");
}

Value

If the property value is specified as none, no list marker image will be used. Instead, the list-style-type property will control what type of list marker—if any—will be rendered.

If the value is specified as a URI using the url() functional notation, the image at that URI will be used as the list marker if it’s available.

Adam Roberts

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.