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.
Thelist-style-imageCSS property sets an image to be used as the list item marker.
It is often more convenient to use the shorthandlist-style.
Try it
list-style-image: url("/shared-assets/images/examples/rocket.svg");list-style-image: none;<section> <div> <p>NASA Notable Missions</p> <ul> <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 withdisplay: list-item;<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
/* 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.
noneSpecifies that no image is used as the marker. If this value is set, the marker defined in
list-style-typewill be used instead. This is the default value forlist-style.
Formal definition
| Initial value | none |
|---|---|
| Applies to | list items |
| Inherited | yes |
| Computed value | The keywordnone or the computed <image> |
| Animation type | discrete |
Formal syntax
list-style-image =
<image>|
none
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Examples
Using a url value
This example has a star as a marker, which we include using the<url> image function.
HTML
<ul> <li>Item 1</li> <li>Item 2</li></ul>CSS
ul { list-style-image: url("star-solid.gif");}Result
Using a gradient
This example has aCSS gradient as a marker, which we create uses thelinear-gradient() image function.
HTML
<ul> <li>Item 1</li> <li>Item 2</li></ul>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
list-styleshorthandlist-style-typepropertylist-style-positionproperty::markerpseudo-element- CSS lists and counters module
- CSS counter styles module