Comment puis-je modifier la couleur des puces de liste en HTML sans utiliser de spans ?

Changer la couleur des puces de liste sans étendue

En HTML, personnaliser la couleur des puces de liste peut être un défi. Bien qu'il soit possible de placer des éléments de liste dans des étendues, cela peut ne pas être une option dans certains scénarios. Cette question recherche une solution qui modifie la couleur des puces sans ajouter de balisage supplémentaire.

Pour y parvenir, la réponse exploite le pseudo-élément li:before de CSS. En définissant list-style: none pour l'élément li, la puce par défaut est supprimée. L'élément li:before est ensuite utilisé pour afficher une puce personnalisée en utilisant la propriété content pour spécifier un caractère Unicode. La propriété color définit la couleur de puce souhaitée.

Voici le code CSS :

li {
  list-style: none;
}

li:before {
  content: '22'; /* For a round bullet */
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

Pour utiliser cette solution, appliquez simplement le style CSS à votre liste comme suit :

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

Cette technique vous permet de changer la couleur des puces sans modifier le contenu de l'élément de liste ni ajouter de balisage supplémentaire, offrant ainsi un moyen flexible de personnaliser vos listes HTML.

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!