Come creare elenchi numerati con cerchi usando HTML e CSS (senza immagini)

Puoi inserire in un cerchio i numeri di un elenco ordinato (<ol>) come mostrato qui sotto, senza usare formati di immagine come JPG o PNG, riducendo così i tempi di sviluppo e di caricamento del tuo sito.

Demo: ecco come appare

CSS

Copia il codice qui sotto e incollalo nel tuo file 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

Copia il codice qui sotto e incollalo nel tuo documento 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>

Puoi copiare sia il CSS sia l’HTML nel tuo file e modificarli come preferisci. Buona programmazione!

Nota: questi selettori si applicano a tutti gli elenchi ordinati della pagina. Per limitarli a un solo elenco, assegnagli una classe (ad esempio ol.circled) e aggiungila a ogni selettore. I numeri usano il font Lato e, se non è caricato, ripiegano su Helvetica o Arial.