Comment - Changer la couleur des puces des listes
Apprenez à changer les couleurs des puces pour les listes avec CSS.
Changer la couleur des puces
- Adèle
- Agnès
- Gamelle
- Bob
Étape 1) Ajoutez du HTML :
Créez une liste de base :
Exemple
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
Étape 2) Ajoutez CSS :
Par défaut, il n'est pas possible de changer la couleur des puces d'un élément de liste. Cependant, vous pouvez faire quelques astuces CSS pour le rendre possible. Notez que vous devrez peut-être le modifier un peu différemment si vous utilisez un framework CSS ou une feuille de style spéciale :
Exemple
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}