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 ⁨juillet 2015⁩.

La propriété CSS list-style-image définit l'image utilisée comme puce devant les éléments de listes.

On peut également utiliser la propriété raccourcie list-style.

Exemple interactif

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 : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels display vaut list-item). Par défaut, cela inclut les éléments <li>. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à <ol> ou à <ul>).

Syntaxe

css

/* Valeurs avec un mot-clé*/ list-style-image: none; /* Valeurs pointant vers une image */ list-style-image: url("star-solid.gif"); /* Valeurs avec une image */ list-style-image: linear-gradient(to left bottom, red, blue); /* Valeurs globales */ list-style-image: inherit; list-style-image: initial; list-style-image: revert; list-style-image: unset;

Valeurs

<image>: Une valeur représentant une image valide, qui sera utilisée comme puce.
none: Aucune image ne sera utilisée comme puce. Si cette valeur est définie, le marqueur défini avec list-style-type sera utilisé à la place.

Définition formelle

Valeur initiale	`none`
Applicabilité	éléments de liste
Héritée	oui
Valeur calculée	The keyword `none` or the computed <image>
Type d'animation	discrète

Syntaxe formelle

list-style-image = 
 <image> |
 none 

<image> = 
 <url> |
 <gradient> 

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

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

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

Exemples

Utiliser une URL

HTML

html

<ul> <li>Élément 1</li> <li>Élément 2</li> </ul>

CSS

css

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

Résultat

Utiliser un dégradé

HTML

html

<ul> <li>Élément 1</li> <li>Élément 2</li> </ul>

CSS

css

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

Résultat

Spécifications

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

Compatibilité des navigateurs

Voir aussi

list-style shorthand
list-style-type property
list-style-position property
::marker pseudo-element
Le module des listes et compteurs CSS
Le module des styles de compteur CSS

Help improve MDN

Learn how to contribute

This page was last modified on ⁨15 sept. 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content