CSS - Propriété list-style-image

Description de la propriété list-style-image.

list-style-image remplace les puces ou la numérotation des listes par une image. Veillez à ce que les dimensions de l'image soient compatibles avec la taille des caractères.

Syntaxes pour list-style-image.

• list-style-image: none;

  Valeur par défaut. La puce ou le numéro sont affichés conformément à la propriété list-style-type.

• list-style-image: url('chemin/fichier');

  L'image spécifiée par la fonction url() remplace les puces ou les numéros.

• list-style-image: linear-gradient(...); list-style-image: radial-gradient(...); list-style-image: conic-gradient(...);

  L'image utilisée pour les puces peut être réalisée avec un dégradé. Reportez-vous à la description de ces fonctions pour plus de précisions sur leur syntaxe : linear-gradient(), radial-gradient(), conic-gradient().

• list-style-image: initial;

  La valeur initiale est none.

• list-style-image: unset; list-style-image: inherit;

  Reportez-vous à la description générale de ces valeurs.

Exemples.

Comme d'habitude, vous pouvez cliquer sur les exemples pour afficher leur code CSS.

Voir aussi...

Listes à puces ou à numéros - Propriétés.

• list-style : Résumé des caractéristiques de listes à puces ou numérotées.
• list-style-position : Définit l'emplacement des marqueurs de listes (puces ou numéros).
• list-style-type : Définit le type des puces ou de la numérotation.

Listes à puces ou à numéros - Directives.

• @counter-style : Définition d'un compteur personnalisé.

Listes à puces ou à numéros - Fonctions.

• counter() : Renvoie la valeur actuelle d'un compteur.
• counters() : Renvoie la valeur d'un compteur hiérarchique.
• symbols() : Définit tous les paramètres d'une numérotation