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

Cette page a été modifiée le 9 nov. 2025 par les contributeurs du MDN.

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