CSS

Liste à puce

CSS - Liste à puce avec puce vraiment personnalisée

La liste à puce est souvent utilisée en HTML comme conteneur. Pour les menus, pour le design, etc. Il va sans dire qu’il s’agit dans ce tutoriel de reproduire une véritable liste à puce qui respecte les règles de l’Académie française ; -) En espérant qu’elle ne monétise pas son appellation contrôlée comme les fromages légendaires français (!)

Ce tutoriel est un simple truc CSS, c’est vrai. D’autre part, on retrouve cette fonctionnalité CSS un peu partout, vrai. Mais est-ce vraiment le cas? Peut-être pas, c’est pourquoi le mot-clé dans ce tutoriel est « vraiment »!

Méthode conventionnelle

Personnellement, j’utilise depuis des années la méthode conventionnelle qui consiste à supprimer la puce et à ajouter devant l’item, à l’aide du sélecteur ::before, le code Unicode du caractère de son choix. C’est simple, ça fonctionne très bien, tant et aussi longtemps que le texte d’un item ne s’étant pas sur plusieurs lignes :

<style>
ul.perso {
  /* Retirer la puce par défaut */
  list-style-type: none;
}
ul.perso li::before {
  /* Spécifier le caractère devant l’item */
  content: "*";
  /* Ajouter une petite marge */
  padding: 0 10px 0 0;
}
</style>

<ul class="perso">
  <li>Liste item 1</li>
  <li>Liste item 2</li>
  <li>Liste item 3</li>
  <li>Liste item 4</li>
  <li>Liste item 5</li>
</ul>

Résultat

• Liste item 1
• Liste item 2
• Liste item 3
• Liste item 4
• Liste item 5

Simple, efficace, et comme on peut constater ça fonctionne. Mais il y a un défaut majeur avec cette technique. La deuxième ligne du contenu de l’item se retrouve sous la puce! Résultat, c’est n’importe quoi, ce n’est pas français et pourquoi utiliser une liste à puce dans ce cas? Un simple paragraphe avec une marge où le premier caractère serait un pictogramme ferait l’affaire.

• Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Pour pallier ce problème, ajouter une marge négative à gauche. C’est moins précis, mais c’est déjà ça.

<style>
ul.perso {
  list-style-type: none;
}
ul.perso li::before {
  content: "*";
  /* Ajouter une petite marge */
  margin:0 5px 0 -14px;
  padding: 0 10px 0 0;
}
</style>

<ul class="perso">
  <li>Liste item 1</li>
  <li>Liste item 2</li>
  <li>Liste item 3</li>
  <li>Liste item 4</li>
  <li>Liste item 5</li>
</ul>

• Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Méthode conventionnelle avec SVG

Même exemple, à peine mieux et largement reprie, avec une image SVG. Ici avec la librairie de police de caractère Font Awesome 5. L’idée consiste à spécifier la police de caractères.

ul.perso {
  list-style-type: none;
}
ul.perso li::before {
  /* Exemple Font Awesome 5 */
  content: "\f005";
  font-family: "Font Awesome 5 Free";
  padding: 0 10px 0 0;
}

ul.perso li::before {
  /* Exemple Font Awesome 4 */
  content: "\f00c";
  font-family: "FontAwesome";
  padding: 0 10px 0 0;
}

Résultat

• Liste item 1
• Liste item 2
• Liste item 3
• Liste item 4
• Liste item 5

Et toujours le même résultat décevant... C’est pourtant l’exemple le plus fréquent!

• Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ul.perso {
  list-style-image: url('crochet.svg');
}

/* Pictogramme SVG Bootstrap Icons v1.4.0 */
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-check" viewBox="0 0 16 16">
  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
</svg>

ul.perso {
  list-style-type: none;
}

ul.perso li {
  background: transparent url(crochet.svg) 0 3px no-repeat;
  padding: 0 0 5px 15px;
}

Méthode font Awesome

C’est aussi la bonne méthode, mais son défaut c’est le code. Il faut ajouter le pictogramme "en ligne" et même une balise supplémentaire dans le cas de Font Awesome 5! un code qui n’est pas portable, c’est moins pratique qu’une classe CSS :

/* Font Awesome 4 */
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Liste item 1</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 2</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 3</li>
  <li><i class="fa-li fa fa-check"></i>Liste item 4</li>
</ul>

/* Font Awesome 5 */
<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 1</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 2</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 3</li>
  <li><span class="fa-li"><i class="fas fa-check"></i></span>Liste item 4</li>
</ul>

Résultat

• Liste item 1
• Liste item 2
• Liste item 3
• Liste item 4

• Liste item 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Liste item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CSS list-style-type

Ce tutoriel ne serait pas complet sans mentionner les types de puces déjà disponibles :

/* Liste partielle des types  */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: trad-chinese-informal;
list-style-type: kannada;

Résultat

• Liste item Disc
• Liste item Circle
• Liste item Square
• Liste item Decimal
• Liste item Georgian
• Liste item Trad-chinese-informal
• Liste item Kannada

Liste complète sur MDN Web Docs

Listes à puces stylisées

Pourquoi arrêter ici le plaisir! Une fois la puce retirée, tout est possible avec la liste à puces. Voilà quelques exemples de liste à puce stylisés glanés au fil des années.

Exemple avec un compteur

/* Liste numérique renversée */
ol.rond-rev {
  counter-reset: li;
  list-style: none;
  *list-style: decimal;
  font: 15px 'trebuchet MS', 'lucida sans';
  padding: 0;
  margin-bottom: 2em;
  margin-right:30px;
  margin-left:30px;
}
@media (min-width: 992px) {
  ol.rond-rev{
    margin-right:30px;margin-left:60px;
  }
}
ol.rond-rev ol{
  margin: 0 0 0 2em;
}
ol.rond-rev li{
  position: relative;
  display: block;
  padding: .4em .4em .4em 2em;
  *padding: .4em;
  margin: .5em 0;
  background-color: blue;
  color: #fff;
  text-decoration: none;
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
}
ol.rond-rev li:hover{
  color:#fff;
  background: blue;transform: scale(1.02);
}
ol.rond-rev li:before{
  content: counter(li);
  counter-increment: li;
  position: absolute;left: -1.3em;
  top: 50%;
  margin-top: -1em;
  background: #fff;
  height: 2em;
  width: 2em;
  line-height: 1.5em;
  border: .3em solid #fff;
  text-align: center;
  font-weight: bold;
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
  background-color: blue;
  color:#fff;
}
ol.rond-rev > li a {
  display:block;
  text-decoration:none;
  color:#eee!important;
}
ol.rond-rev > li a:hover {
  display:block;
  text-decoration:none;
  color:#fff!important;
}

Résultat

1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Références

• CSS list-style-image Property - w3schools.com
• Styling lists and links - W3C
• Style de listes - MDN Web Docs
• list-style-type - MDN Web Docs
• Icons in a List - Font Awesome 5
• Icons in a List - Font Awesome 4
• Font Awesome 4
• Font Awesome 5
• Bootstrap Icons