Créer des listes numérotées avec des cercles en HTML et CSS (sans images)

Vous pouvez entourer d’un cercle les numéros d’une liste ordonnée (<ol>) comme ci-dessous, sans utiliser de formats d’image comme JPG ou PNG, ce qui réduit le temps de développement et de chargement de votre site.

Démo : le rendu

CSS

Copiez le code ci-dessous et collez-le dans votre fichier CSS.

ol {
    counter-reset: item;
    margin: 0;
    padding-left: 0;
}
ol > li {
    counter-increment: item;
    list-style: none inside;
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol > li:before {
    content: counter(item);
    margin-right: 20px;
    padding: 8px;
    display: block;
    box-sizing: content-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center;
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    line-height: 65px;
    float: left;
}

HTML

Copiez le code ci-dessous et collez-le dans votre document HTML.

<ol>
    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>
    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum.</li>
    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>
    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>
    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>
</ol>

Vous pouvez copier le CSS et le HTML dans votre fichier et les adapter à votre goût. Bon code !

Remarque : ces sélecteurs s’appliquent à toutes les listes ordonnées de la page. Pour les limiter à une seule liste, donnez-lui une classe (par exemple ol.circled) et ajoutez-la à chaque sélecteur. Les numéros utilisent la police Lato, et se rabattent sur Helvetica ou Arial si Lato n’est pas chargée.