list-style-image

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriété CSS list-style-image définit une image à utiliser comme marqueur d'élément de liste.

Il est souvent plus pratique d'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é est appliquée aux éléments de liste, c'est-à-dire aux éléments avec display: list-item; qui par défaut ^(angl.) inclut les éléments <li>. Parce que cette propriété est héritée, elle peut être définie sur l'élément parent (normalement <ol> ou <ul>) pour qu'elle s'applique à tous les éléments de liste.

Syntaxe

css

/* Valeurs avec un mot-clé*/
list-style-image: none;

/* Valeurs de type <url> */
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: revert-layer;
list-style-image: unset;

Valeurs

<image>: Une image valide à utiliser comme marqueur.
none: Définit qu'aucune image n'est utilisée comme marqueur. Si cette valeur est définie, le marqueur défini dans list-style-type sera utilisé à la place. C'est la valeur par défaut pour list-style.

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>           |
  <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>

Exemples

Utiliser une valeur URL

Cet exemple utilise une étoile comme marqueur, que nous ajoutons avec la fonction d'image <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é

Cet exemple utilise un dégradé CSS comme marqueur, que nous créons avec la fonction d'image linear-gradient().

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

La propriété raccourcie list-style
La propriété list-style-type
La propriété list-style-position
Le pseudo-élément ::marker
Le module des listes et compteurs CSS
Le module des styles de compteur CSS

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 10 févr. 2026 par les contributeurs du MDN.

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