list-style-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The list-style-imageCSS property sets an image to be used as the list item marker.

It is often more convenient to use the shorthand list-style.

Try it

list-style-image: url("/shared-assets/images/examples/rocket.svg"); 
list-style-image: none; 
<section class="default-example" id="default-example"> <div> <p>NASA Notable Missions</p> <ul class="transition-all unhighlighted" id="example-element"> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div> </section> 
.default-example { font-size: 1.2rem; } #example-element { width: 100%; background: #be094b; color: white; } section { text-align: left; flex-direction: column; } hr { width: 50%; color: lightgray; margin: 0.5em; } .note { font-size: 0.8rem; } .note a { color: #009e5f; } @counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " "; }

Note: This property is applied to list items, i.e., elements with display: list-item;by default this includes <li> elements. Because this property is inherited, it can be set on the parent element (normally <ol> or <ul>) to let it apply to all list items.

Syntax

css
/* Keyword values */ list-style-image: none; /* <url> values */ list-style-image: url("star-solid.gif"); /* valid image values */ list-style-image: linear-gradient(to left bottom, red, blue); /* Global values */ list-style-image: inherit; list-style-image: initial; list-style-image: revert; list-style-image: revert-layer; list-style-image: unset;

Values

<image>

A valid image to use as the marker.

none

Specifies that no image is used as the marker. If this value is set, the marker defined in list-style-type will be used instead. This is the default value for list-style.

Formal definition

Initial valuenone
Applies tolist items
Inheritedyes
Computed valueThe keyword none or the computed <image>
Animation typediscrete

Formal syntax

list-style-image = 
<image>|
none

<image> = 
<url>|
<gradient>

<url> = 
<url()>|
<src()>

<url()> = 
url(<string><url-modifier>*)|
<url-token>

<src()> = 
src(<string><url-modifier>*)

Examples

Using a url value

This example has a star as a marker, which we include using the <url> image function.

HTML

html
<ul> <li>Item 1</li> <li>Item 2</li> </ul>

CSS

css
ul { list-style-image: url("star-solid.gif"); }

Result

Using a gradient

This example has a CSS gradient as a marker, which we create uses the linear-gradient() image function.

HTML

html
<ul> <li>Item 1</li> <li>Item 2</li> </ul>

CSS

css
ul { font-size: 200%; list-style-image: linear-gradient(to left bottom, red, blue); }

Result

Specifications

Specification
CSS Lists and Counters Module Level 3
# image-markers

Browser compatibility

See also