puce.css

/* première liste à puces avec des formes triangulaires */

.list1 li{
    list-style: none;
}
/* Ajouter un élément avec un contenu vide et une largeur et hauteur nulles directement avant les "li" */
.list1 li:before{
   content: "";
   width: 0; 
   height: 0; 
 /*Ajouter une bordure de 5px , ce qui va construire 4 triangles  */
   border: 5px solid black; 
   /* Rendre les triangles de haut de droite et de bas transparents */
   border-top-color: transparent; 
   border-right-color: transparent; 
   border-bottom-color: transparent;
   /* aligner les triangle avec le texte */
   display: inline-block;
   vertical-align: middle;
   margin-right: 5px;
}

/* deuxième liste à puces avec des losanges */

.list2 li{
    list-style: none;
    

}
 .list2 li:before{
   content: "";
   border: 2px solid blue;
   display: inline-block;
   height: 4px;
   width: 4px;
   vertical-align: middle;
   transform:rotate(45deg);
   margin-right: 5px;
}


/* troisième liste à puces avec des compteurs css */

.list3{
	counter-reset: c1;
	list-style-type:none;
}
.list3 li{
	margin-bottom: 5px;
}
	
.list3 li:before{
    /* Incrémentation  du compteur c1 avant  chaque li */
    counter-increment: c1;
    /* Attribuer la valeur du compteur c1 au contenu de l’élément qui vient directement avant les "li"*/
    content: counter(c1); 
    /* Design du contenu */
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    padding: 1px 5px;
    color: white;
    background-color: blue;
    margin-right: 5px;
    font-weight: bold;
	 }