Customiser les puces des listes à puces HTLM

Utilisation du pseudo élément CSS :before pour modifier l’apparence des listes à puces <li> HTML .

<div id="container">
  <ul>
     <li>Joe</li>
     <li>Jack</li>
     <li>William</li>
     <li>Averell</li>
  </ul>
</div>

#container ul {
  list-style: none;
  padding-left:10px;
}
#container li {
    padding-left: 1em;
    text-indent: -.7em;
    padding-bottom:5px;
}

#container li:before {
    content: ">>  ";
    font-size:.7em;
    color: #e5232b;
}