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-image CSS 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 <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.
Formal definition
| Animation type | discrete |
|---|
Formal syntax
list-style-image =
<image> |
<image-set()> <gradient>
<image()> =
image( <image-tags><color># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr <string>
<image-set-option> =
] <string> ) | <percentage [0,100]><hash-token>
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 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
list-styleshorthandlist-style-typepropertylist-style-positionproperty::markerpseudo-element- CSS lists and counters module
- CSS counter styles module