Genummerde lijsten met cirkels maken met HTML en CSS (zonder afbeeldingen)

Je kunt de cijfers van een geordende lijst (<ol>) zoals hieronder in een cirkel zetten zonder afbeeldingsformaten als JPG of PNG te gebruiken, zodat je ontwikkel- en laadtijd van je site bespaart.

Demo: zo ziet het eruit

CSS

Kopieer de onderstaande code en plak deze in je CSS-bestand.

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

Kopieer de onderstaande code en plak deze in je HTML-document.

<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>

Je kunt zowel de CSS als de HTML naar je bestand kopiëren en naar wens aanpassen. Veel programmeerplezier!

Let op: deze selectors gelden voor elke geordende lijst op de pagina. Om ze tot één lijst te beperken, geef je die lijst een klasse (bijvoorbeeld ol.circled) en voeg je die toe aan elke selector. De cijfers gebruiken het lettertype Lato en vallen terug op Helvetica of Arial als Lato niet is geladen.