Comment modifier les couleurs des puces dans les listes HTML sans utiliser d'éléments Span ?

Comment modifier les couleurs des puces dans les listes HTML sans éléments Span

Dans certains scénarios, vous souhaiterez peut-être changer la couleur des puces dans un Liste HTML sans ajout d'éléments dans

balises. Voici une solution ingénieuse qui évite l'utilisation de spans.

Pour y parvenir, exploitez le pseudo-élément :before :

li {
  list-style: none;
}

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

Cette méthode supprime le style de puce par défaut et crée une nouvelle puce via :avant. Il offre une flexibilité en termes de forme et de couleur, avec une prise en charge dans les principaux navigateurs, notamment IE8, Firefox et Chrome.

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!