Comment puis-je modifier les couleurs des puces dans les listes HTML en utilisant uniquement CSS ?

Définition des couleurs des puces dans les listes HTML sans images ni éléments en ligne

Lors du style des listes non ordonnées, on peut vouloir changer la couleur des puces sans affecter le texte de l'élément de liste. Tout en définissant simplement la couleur du

L'élément fonctionne, il change également la couleur du texte.

Une solution élégante uniquement en CSS

La réponse réside dans le pseudo-élément ::before :

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 1em;
  text-indent: -0.7em;
}

li::before {
  content: "•";
  color: #F00;
}

Ce code obtient l'effet souhaité sans recourir à des images ou à des éléments en ligne. Voici comment cela fonctionne :

• list-style : aucun ; supprime les puces par défaut.
• ::before crée un pseudo-élément positionné avant chaque
• article.
• contenu : "•" spécifie la balle souhaitée sous forme de disque ou de carré.
• couleur : #F00 ; définit la couleur de la puce.
• La mise en retrait du texte de l'élément de liste avec padding-left et text-indent garantit l'alignement avec la puce.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!