---
title: "[CSS] Personnaliser les puces d’une liste (bullet points)"
description: "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…"
url: "https://academy.drgeek.com/docs/avance/divi-code/css-personnaliser-les-puces-dune-liste-bullet-points/"
updated: "2026-03-19"
category: Avancé / Divi (code)
tags:
  - Avancé
---

# [CSS] Personnaliser les puces d’une liste (bullet points)

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.