CSS Reference Property

list-style-image

The list-style-image property is used to specify an image that is to be used as a marker (bullet) for list items or elements with <a href="http://tympanus.net/codrops/css_reference/display">display</a>: list-item.

When the image is available, it will replace the the marker set using the list-style-type property.

Trivia & Notes

The size of the image is calculated from the following rules:

  1. If the image has a intrinsic width and height, the used width and height are the intrinsic width and height.
  2. Otherwise, if the image has an intrinsic ratio and either an intrinsic width or an intrinsic height, the used width/height is the same as the provided intrinsic width/height, and the used value of the missing dimension is calculated from the provided dimension and the ratio.
  3. Otherwise, if the image has an intrinsic ratio, the used width is 1em and the used height is calculated from this width and the intrinsic ratio. If this would produce a height larger than 1em, then the used height is instead set to 1em and the used width is calculated from this height and the intrinsic ratio.
  4. Otherwise, the image’s used width is its intrinsic width if it has one, or else 1em. The image’s used height is its intrinsic height if it has one, or else 1em.

You can read more about images and their intrinsic dimensions or lack thereof in the <image> entry.

Official Syntax

  • Syntax:

    list-style-image: <url> | none | inherit
  • Initial: none
  • Applies To: elements with display: list-item
  • Animatable: no

Values

<url>
The URL pointing to the location of the image that is to be used as a marker.
none
No image is used as a marker.
inherit
The list item inherits its list-style-image value from its parent.

Examples

The following example sets the marker at the beginning of each list item to be the image “pointing-hand.png”.

ul { 
    list-style-image: url("images/pointing-hand.png"); 
}
                

Live Demo

Try using an image of your own as the list item marker to see how it changes.

View this demo on the Codrops Playground

Browser Support

The list-style-image property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by . Last updated February 4, 2015 at 3:35 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.