Maison >interface Web >tutoriel CSS >Comment puis-je personnaliser les couleurs des puces dans les listes HTML à l'aide de CSS ?

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

Patricia Arquette
Patricia Arquetteoriginal
2024-12-11 03:27:09705parcourir

How Can I Customize Bullet Colors in HTML Lists Using 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

    <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: -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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn