Comment changer la couleur des puces en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2020-06-10 15:52:03

Question

Comment puis-je changer la couleur des puces d'une liste du type <ul>, en HTML et CSS ?

Réponse

Pour changer la couleur des puces en HTML et CSS vous devez tout d'abord supprimer le style par défaut appliqué aux listes du type <ul>, puis définir manuellement le contenu qui précède chaque élément de la liste.

Pour supprimer le style par défaut il faut utiliser list-style: none;.
Pour définir manuellement le style des puces, dont la couleur, on utilise la notation ::before.

Voici un exemple pour changer la couleur des puces en HTML et CSS :

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Comment changer la couleur des puces en HTML et CSS ?</title>
<style>
ul{ 
list-style: none; 
}
ul li::before {
content: "\2022";   
color: red;  
display: inline-block;  
width: 1em; 
margin-left: -1em;
} 
</style> 
</head>  
<body> 
<ul>
<li>Un</li>
<li>Deux</li>
<li>Trois</li>
</ul>
</body>
</html>

Remarque : la propriété content permet de définir la forme des puces, elle est exprimée en code unicode.