Générez des styles de liste CSS avec aperçu en temps réel. Choisissez parmi les puces standard, les numéros, les emojis, les images personnalisées et plus. Copiez le code CSS instantanément. Client pur.
Le style de liste CSS contrôle comment les éléments de liste sont marqués. Ce générateur vous permet de prévisualiser tous les types de liste CSS standard et de créer des marqueurs personnalisés avec des emojis, des icônes ou des images. Le CSS généré utilise le pseudo-élément ::marker pour les navigateurs modernes avec support de repli.
Le pseudo-élément ::marker cible la boîte de marqueur d'un élément de liste. Il vous permet de styliser les puces et les numéros avec des couleurs, des polices et des tailles personnalisées. Les navigateurs modernes supportent ::marker, mais le générateur fournit aussi du CSS de repli pour les navigateurs anciens.
Oui, vous pouvez utiliser la propriété list-style-image ou le pseudo-élément ::marker avec content. Le générateur supporte les deux approches. Pour de meilleurs résultats, utilisez de petites images SVG ou PNG (16x16px à 24x24px).
Le pseudo-élément ::marker est supporté dans tous les navigateurs modernes incluant Chrome 86+, Firefox 68+, Safari 11.1+ et Edge 86+. Pour les navigateurs anciens, le générateur fournit du CSS de repli utilisant les propriétés standard de list-style.
Utilisez le pseudo-élément ::marker avec la propriété color. Le CSS généré inclut ceci automatiquement. Pour les listes ordonnées, ceci change la couleur des numéros tout en gardant le texte de l'élément dans sa couleur originale.