Comment puis-je personnaliser les couleurs des puces dans les listes HTML à l'aide de CSS ?

Personnalisation des couleurs des puces dans les listes HTML avec CSS

Dans les listes HTML, la personnalisation de l'apparence des puces peut améliorer l'attrait visuel du contenu. Cependant, définir la couleur des éléments de la liste à l'aide de CSS affecte à la fois le texte et les puces. Pour une solution plus élégante, envisagez l'approche suivante :

Créez un nouveau style CSS pour la liste non ordonnée (

). Désactivez les puces par défaut en définissant list-style : none ;.

Pour chaque élément de la liste (

• ), ajoutez un remplissage à gauche et un retrait de texte négatif pour décaler le contenu de la puce.

  Enfin, utilisez le pseudo-élément ::before pour créer une puce personnalisée avant chaque élément de la liste. Vous pouvez définir le contenu (comme un point ou un carré) et la couleur indépendamment.

  Exemple :

  HTML

  • Item 1
  • Item 2
  • Item 3

  CSS

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  
  li::before {
    content: "• ";
    color: red; 
  }

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!