Maison > interface Web > tutoriel CSS > Pouvez-vous personnaliser les couleurs des puces de liste sans utiliser d'élément `` ?

Pouvez-vous personnaliser les couleurs des puces de liste sans utiliser d'élément `` ?

Mary-Kate Olsen
Libérer: 2024-12-15 13:08:23
original
340 Les gens l'ont consulté

Can You Customize List Bullet Colors Without Using a `` Element?

Comment personnaliser les puces de liste sans étendue

En HTML, une liste à puces fournit une manière concise et ordonnée de présenter les éléments. Cependant, par défaut, le style des puces est limité et ne peut pas être modifié sans ajouter des éléments supplémentaires comme une étendue.

Pouvez-vous modifier les couleurs des puces de la liste sans utiliser l'étendue ?

Oui, il est possible de modifier les couleurs des puces en utilisant CSS et le pseudo-élément :before, sans avoir besoin de balisage supplémentaire dans la liste. éléments.

Mise en œuvre

  1. Supprimer le style de puce par défaut :

    li {
      list-style: none;
    }
    Copier après la connexion
  2. Insérer un :before pseudo-élément pour afficher un personnalisé bullet:

    li:before {
      content: '22'; /* Unicode character for a round bullet */
      display: block;
      position: relative;
      max-width: 0;
      max-height: 0;
      left: -10px;
      top: 0;
      color: green;
      font-size: 20px;
    }
    Copier après la connexion
  • content: Spécifie le caractère Unicode pour la forme de puce souhaitée.
  • color: Définit la couleur de la puce.
  • font-size : Ajuste la taille de la puce.

Remarque : Cette méthode fonctionne bien dans les navigateurs modernes mais peut ne pas être compatible avec les anciennes versions d'IE.

Exemple HTML

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal