CSS : list-style - Web Formation

Description

La propriété list-style permet de définir l’apparence des puces et des numéros des listes HTML (<ul> et <ol>).

C’est une propriété raccourcie qui combine trois sous-propriétés :

list-style-type  : Permet de choisir la forme des puces ou le style de numérotation : rond, carré, romain, alphabet…
list-style-position  : Définit si la puce est inside (dans le texte) ou outside (à gauche du texte). Valeur par défaut : outside.
list-style-image  : Utilise une image personnalisée comme puce (souvent remplacé aujourd’hui par des icônes ou ::marker).

Voici les valeurs les plus courantes :

Propriété	Exemples	Description
`list-style-type`	`disc`, `circle`, `square` `decimal`, `lower-roman`, `upper-alpha`	Style de la puce ou du numéro.
`list-style-position`	`outside` `inside`	Puce hors ou dans le texte.
`list-style-image`	`url('puce.png')`	Image utilisée comme puce.
`none`	`list-style: none;`	Supprime complètement les puces (utilisé pour les menus, navigations…)

<ul class="custom-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul class="custom-list"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

.custom-list {
    list-style-position: inside;
    list-style-type: square;
    background-color: #eee;
    padding: 10px;
}

.custom-list {    list-style-position: inside;    list-style-type: square;    background-color: #eee;    padding: 10px;}

Aperçu du résultat

list-style: none; est très utilisé pour créer des menus de navigation.
Pour styliser les puces de manière avancée, on peut utiliser le pseudo-élément ::marker.
list-style-image est peu utilisé aujourd’hui, remplacé par des icônes SVG ou des images en background.
Les styles peuvent être différents selon <ul> (puces) ou <ol> (numéros).