::Marker : Changer la couleur de la puce d’une liste en CSS

Quand on débute en HTML et en CSS, la liste à puce fait souvent partie des toutes premières balises que l’on apprend à utiliser. Elle paraît simple, presque banale. Pourtant, dès que l’on commence à soigner un design ou à vouloir respecter une charte graphique, une question revient très vite : comment changer la couleur de la puce ? … Grâce à la pseudo-classe ::marker que nous allons découvrir !

• Comprendre pourquoi la couleur de la puce d’une liste à puce ne se comporte pas comme un texte classique.
• Choisir la bonne méthode selon votre besoin, pour obtenir un rendu propre, cohérent et professionnel sans casser la structure HTML ni l’accessibilité.
• Gagner en assurance dans vos choix de design et écrire un CSS plus clair, plus moderne et plus facile à maintenir sur vos projets.

Beaucoup de débutants en développement Frontend pensent que c’est impossible ou très compliqué. Certains finissent même par abandonner les listes à puce au profit de simples paragraphes, ce qui est dommage pour la structure et l’accessibilité d’une page web. Rassurez‑vous : en CSS, plusieurs solutions existent, et certaines sont étonnamment simples quand on les comprend bien.

Dans ce guide complet, nous allons partir de zéro. Vous allez comprendre ce qu’est réellement une liste à puce, comment le navigateur affiche la couleur de la puce par défaut, et surtout comment modifier cette couleur proprement, sans bidouille hasardeuse. Prenez votre temps, l’objectif est que tout soit clair et logique.

Comprendre ce qu’est une liste à puce en HTML

Avant même de parler de couleur de puce, il est essentiel de bien comprendre comment fonctionne une liste à puce en HTML. Une liste à puce est composée de deux éléments principaux : la balise ul et la balise li.

La balise ul signifie « unordered list », c’est‑à‑dire une liste non ordonnée. Elle sert de conteneur à la liste. À l’intérieur, chaque élément de la liste est représenté par une balise li, pour « list item ».

Voici un exemple très simple :

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Dans cet exemple, le navigateur affiche automatiquement des puces devant chaque élément. Ces puces ne sont pas des caractères tapés au clavier : elles sont générées par le navigateur lui‑même. C’est un point fondamental pour comprendre pourquoi la couleur de la puce ne se change pas toujours comme on l’imagine. Voici le résultat :

• HTML
• CSS
• JavaScript

Par défaut, la puce hérite de certaines propriétés CSS, mais pas de toutes. Et c’est précisément là que les choses deviennent intéressantes.

Pourquoi la couleur de la puce pose problème en CSS

Lorsque vous appliquez une couleur sur un élément li avec la propriété color, vous modifiez la couleur du texte, mais pas forcément celle de la puce. C’est souvent une surprise pour les débutants.

Prenons un exemple :

li {
    color: red;
}

Dans de nombreux navigateurs modernes, la couleur du texte devient rouge… mais la puce reste noire. Pourquoi ? Parce que la puce n’est pas considérée comme faisant partie du texte classique. Elle est gérée comme un marqueur de liste.

• HTML
• CSS
• JavaScript

Pendant longtemps, il n’existait pas de solution directe et propre pour changer uniquement la couleur de la puce. Les développeurs utilisaient des astuces, parfois un peu tordues. Aujourd’hui, le CSS moderne propose des solutions bien plus élégantes, mais il est important de connaître les bases pour comprendre leur logique.

La solution la plus simple : la propriété list-style

La première propriété à connaître lorsqu’on parle de liste à puce est list-style. Cette propriété permet de définir l’apparence globale des puces : leur type, leur position et parfois leur image.

Par exemple :

ul {
    list-style: disc;
}

Ici, on indique simplement que la puce doit être un disque plein, ce qui correspond au comportement par défaut. Malheureusement, list-style ne permet pas de définir directement une couleur de puce. On peut changer la forme, mais pas sa teinte.

C’est souvent à ce moment‑là que les débutants se disent : « Bon, le CSS ne permet pas de changer la couleur de la puce ». En réalité, ce n’est qu’une demi‑vérité.

La propriété ::marker, la vraie solution moderne

Depuis quelques années, le CSS a introduit un pseudo‑élément spécialement conçu pour les listes : ::marker. C’est lui qui représente la puce elle‑même.

Grâce à ::marker, il devient enfin possible de changer la couleur de la puce sans affecter le texte.

Voici un exemple simple :

li::marker {
    color: blue;
}

Avec ce code, seules les puces deviennent bleues, tandis que le texte reste inchangé. C’est une solution propre, lisible et parfaitement adaptée aux débutants.

• HTML
• CSS
• JavaScript

Ce pseudo‑élément est aujourd’hui bien supporté par les navigateurs modernes. Si vous développez des sites récents, c’est clairement la méthode à privilégier.

À ce stade, vous savez déjà changer la couleur de la puce d’une liste à puce en CSS. Mais ce n’est que le début. Dans la suite de l’article, nous verrons comment aller plus loin, gérer des couleurs différentes selon les listes, contourner les limitations de certains navigateurs, et même personnaliser totalement l’apparence des puces.

Changer la couleur de la puce selon la liste

Dans un projet réel, vous n’aurez presque jamais une seule liste à puce sur toute votre page. Très souvent, chaque liste a un rôle différent. Une liste peut servir à présenter des avantages, une autre à afficher des étapes, une autre encore à lister des prérequis. Il est donc logique de vouloir une couleur de puce différente selon le contexte.

La bonne nouvelle, c’est que ::marker fonctionne parfaitement avec des classes CSS. Il suffit donc de cibler précisément la liste concernée.

Prenons un exemple concret. Imaginons deux listes : l’une pour des points positifs, l’autre pour des points négatifs.

<ul class="positif">
    <li>Facile à apprendre</li>
    <li>Lisible</li>
</ul>

<ul class="negatif">
    <li>Peut devenir complexe</li>
    <li>Nécessite de la pratique</li>
</ul>

En CSS, vous pouvez alors écrire :

.positif li::marker {
    color: green;
}

.negatif li::marker {
    color: red;
}

• Facile à apprendre
• Lisible

• Peut devenir complexe
• Nécessite de la pratique

Résultat : le texte reste identique, mais la couleur de la puce change selon la liste. C’est simple, propre et très lisible dans le code. C’est exactement ce genre de logique que l’on attend d’un CSS bien structuré.

Comprendre la portée du sélecteur ::marker

Il est important de bien comprendre que ::marker ne permet pas tout. On peut modifier la couleur de la puce, sa taille via font-size, et parfois son contenu. En revanche, certaines propriétés comme background ou padding ne fonctionneront pas.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Pourquoi cette limitation ? Tout simplement parce que la puce reste un élément très particulier, géré par le navigateur. Elle n’est pas un bloc classique comme un div ou un span.

Voici un exemple valide :

li::marker {
    color: #ff6600;
    font-size: 1.2em;
}

Et voici un exemple qui ne fonctionnera pas comme attendu :

li::marker {
    background: black;
}

Ce comportement peut être frustrant quand on débute, mais il faut le voir autrement : ::marker est là pour des ajustements simples et propres. Pour des personnalisations plus poussées, il existe une autre méthode.

Méthode alternative : supprimer la puce et en recréer une en CSS

Avant l’arrivée de ::marker, les développeurs utilisaient une technique très répandue. Elle consiste à supprimer la puce native et à en recréer une artificielle avec du CSS. Cette méthode est toujours utile aujourd’hui dans certains cas précis.

La première étape consiste à retirer la puce par défaut.

ul {
    list-style: none;
}

À partir de là, la liste n’a plus de puce. Elle devient visuellement fade, mais c’est normal. Nous allons maintenant ajouter une fausse puce devant chaque élément.

li::before {
    content: "•";
    color: blue;
    margin-right: 8px;
}

Ici, on utilise le pseudo-élément ::before pour insérer un caractère « point » avant chaque élément de liste. Cette fausse puce est totalement personnalisable : couleur, taille, espacement, tout est possible.

C’est une méthode très puissante, mais elle demande un peu plus de rigueur, notamment pour conserver un bon alignement et une accessibilité correcte.

En CSS, quand quelque chose ne réagit pas comme prévu, ce n’est pas forcément une faute, mais souvent une règle que l’on ne connaît pas encore.

Quelle méthode choisir selon votre projet

Si votre objectif est simplement de changer la couleur de la puce d’une liste à puce, ::marker est aujourd’hui la meilleure solution. Elle est claire, moderne et facile à maintenir.

La méthode avec ::before devient intéressante lorsque vous voulez un design très spécifique, par exemple une icône personnalisée, une forme particulière ou une animation. En contrepartie, elle demande plus d’attention et un peu plus d’expérience.

Dans la prochaine partie, nous verrons les bonnes pratiques à respecter, les pièges à éviter quand on débute, et comment garder des listes à puce accessibles et cohérentes dans un vrai projet web.

Les erreurs courantes quand on débute avec les listes à puce

Lorsque l’on apprend le CSS, certaines erreurs reviennent très souvent autour de la liste à puce. Elles sont normales, presque rassurantes, car elles montrent que vous êtes en train d’expérimenter. La première consiste à penser que la propriété color suffit à tout gérer. Comme nous l’avons vu plus haut, elle agit sur le texte, mais pas toujours sur la couleur de la puce.

Une autre erreur fréquente est de supprimer les puces avec list-style: none sans recréer ensuite un repère visuel. Résultat : le contenu devient plus difficile à lire, surtout pour un utilisateur qui parcourt la page rapidement. Une liste à puce sert justement à structurer l’information. La faire disparaître sans réflexion nuit à la compréhension.

Il arrive aussi que l’on mélange plusieurs méthodes dans le même projet, par exemple ::marker pour certaines listes et ::before pour d’autres, sans logique claire. Cela fonctionne techniquement, mais le code devient confus et difficile à maintenir. En CSS, la cohérence est souvent plus importante que la sophistication.

Accessibilité : un point souvent oublié

Quand on parle de liste à puce, on pense surtout au visuel. Pourtant, ces listes jouent un rôle essentiel pour l’accessibilité. Les lecteurs d’écran utilisent la structure HTML pour annoncer qu’il s’agit d’une liste, avec un nombre précis d’éléments.

C’est pour cette raison qu’il est toujours préférable de conserver une vraie balise ul et des li, même si vous personnalisez totalement la couleur de la puce. Utiliser des paragraphes à la place d’une liste à puce peut sembler plus simple, mais c’est une mauvaise pratique.

La méthode avec ::marker respecte parfaitement cette logique, car la puce reste native. La méthode avec ::before, elle, doit être utilisée avec plus de prudence. Visuellement, tout fonctionne, mais la puce n’est plus reconnue comme telle par certains outils d’assistance. C’est un compromis à connaître, surtout si vous travaillez sur un site accessible au plus grand nombre.

Compatibilité navigateur expliquée simplement

Bonne nouvelle : la propriété ::marker est aujourd’hui bien supportée par les navigateurs modernes. Chrome, Firefox, Edge et Safari récents l’interprètent correctement. Pour un site actuel, il n’y a donc pas de crainte particulière.

Si vous devez maintenir un projet très ancien ou compatible avec des environnements obsolètes, la méthode avec ::before reste une solution de secours fiable. Ce genre de situation devient toutefois de plus en plus rare, et il est souvent préférable d’écrire un CSS moderne et lisible plutôt que de se limiter inutilement.

Structurer son CSS pour des listes à puce propres

Dans un vrai projet, la couleur de la puce ne doit jamais être définie au hasard. Elle doit s’intégrer à une logique globale de design. L’idéal est de centraliser les styles des listes à puce dans une section dédiée de votre feuille CSS.

Par exemple, vous pouvez définir une couleur de puce par défaut pour tout le site, puis des variantes selon le contexte. Cette organisation rend votre code plus clair et facilite les évolutions futures. Si, dans six mois, vous changez de charte graphique, vous saurez exactement où intervenir.

Penser la liste à puce comme un élément de design à part entière est une habitude qui fait rapidement la différence entre un site bricolé et un site professionnel.

Changer la couleur de la puce d’une liste à puce en CSS peut sembler anodin au premier abord. Pourtant, ce petit détail révèle beaucoup de choses sur la manière dont le HTML et le CSS fonctionnent ensemble. En comprenant pourquoi la puce ne réagit pas comme un texte classique, vous progressez bien au-delà de ce simple cas pratique.

Aujourd’hui, avec ::marker, vous disposez d’un outil moderne, simple et élégant pour gérer la couleur de la puce sans casser la structure de vos listes. Et lorsque vos besoins deviennent plus spécifiques, les méthodes alternatives existent, à condition de les utiliser en connaissance de cause.

La prochaine fois que vous verrez une liste à puce sur un site, prenez un instant pour l’observer. Derrière ce petit point discret se cache toute une logique de structure, de lisibilité et d’accessibilité. Et c’est souvent dans ces détails que l’on reconnaît un développeur qui maîtrise réellement son CSS.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr