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.

Create a 3D CSS Printer that Actually Prints!

HTML & CSS

By Jhey Tompkins, June 16, 2021

Learn how to make impressive 3D objects in CSS, and even how to make them do amazing things like print a real image from a URL you supply!

Squeaky Portraits: Having Fun with the CSS path() Function

HTML & CSS

By Jhey Tompkins, March 25, 2021

The CSS path() function finally has wide browser support. Learn how to use it to take your clips paths to awesome new heights.

Canvas vs SVG: Choosing the Right Tool for the Job

HTML & CSS

By Maria Antonietta Perna, February 24, 2021

Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.

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.