Comment modifier les couleurs des puces dans les listes HTML sans images ni balises supplémentaires ?

Comment personnaliser les couleurs des puces dans les listes HTML sans utiliser d'images ou de balises Span

Le défi

Lors de la personnalisation d'une liste HTML non triée avec des puces carrées à l'aide de list-style: square;, il peut arriver que les éléments de la liste entière deviennent ceux spécifiés. couleur au lieu de seulement les balles. Cela soulève la question : comment modifier la couleur des puces sans recourir à des images de sprite ou à des balises supplémentaires ?

La solution

Une solution simple et efficace existe :

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

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

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

li::before {
  content: "• ";
  color: red; /* or any desired color */
}

Dans cette approche :

• style de liste : aucun ; supprime les puces par défaut.
• padding-left et text-indent ajustent le positionnement du contenu.
• li::before insère la puce à l'aide de la propriété content. La propriété color spécifie ensuite la couleur souhaitée.

Cette technique permet une personnalisation élégante des couleurs des puces dans les listes HTML sans avoir besoin d'éléments ou d'images supplémentaires.

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!