Maison >interface Web >tutoriel CSS >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 (
Pour chaque élément de la liste (
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!