Par défaut, les listes affichent des puces standards. Il est possible de les personnaliser pour améliorer le design et la cohérence visuelle.
Contenu avancé #
Cet article utilise du CSS. Une mauvaise manipulation peut impacter l’affichage des listes sur votre site.
Objectif #
Remplacer les puces classiques d’une liste par un style personnalisé.
Solution simple avec CSS #
Ajoute le code suivant dans le CSS personnalisé du site :
ul {
list-style: none;
padding-left: 0;
}
ul li::before {
content: "✔";
margin-right: 8px;
color: #E02B20;
}
Comprendre le fonctionnement #
- list-style: none; supprime les puces par défaut
- ::before permet d’ajouter un élément personnalisé avant chaque ligne
- content définit le symbole affiché
Personnaliser les puces #
Tu peux remplacer le symbole par :
- ✔ (validation)
- → (flèche)
- ★ (étoile)
- ou tout autre caractère
Limiter à une zone spécifique #
Pour éviter d’impacter toutes les listes du site, cible une classe spécifique :
.custom-list ul {
list-style: none;
padding-left: 0;
}
.custom-list ul li::before {
content: "✔";
margin-right: 8px;
color: #E02B20;
}
Points d’attention #
- Ce code peut modifier toutes les listes du site si non ciblé
- Attention à la lisibilité sur mobile
- Certains symboles peuvent ne pas s’afficher selon la police utilisée
Astuce utile #
Utilise des puces personnalisées pour renforcer la hiérarchie visuelle et guider la lecture.
Compatibilité #
Cette méthode fonctionne sur tous les sites modernes. Le rendu dépend toutefois de la police utilisée et du navigateur.
Pour conclure #
Personnaliser les puces permet d’améliorer facilement le design d’une liste et de la rendre plus cohérente avec l’identité visuelle du site.