Cómo crear listas numeradas con círculos usando HTML y CSS (sin imágenes)

Puedes rodear con un círculo los números de una lista ordenada (<ol>) como se ve abajo sin usar formatos de imagen como JPG o PNG, lo que reduce el tiempo de desarrollo y de carga de tu sitio.

Demo: así se ve

CSS

Copia el código siguiente y pégalo en tu archivo 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 el código siguiente y pégalo en tu 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>

Puedes copiar tanto el CSS como el HTML en tu archivo y modificarlos a tu gusto. ¡Disfruta programando!

Nota: estos selectores afectan a todas las listas ordenadas de la página. Para limitarlos a una sola lista, ponle una clase (por ejemplo ol.circled) y añádela a cada selector. Los números usan la fuente Lato y, si no está cargada, recurren a Helvetica o Arial.