Nummerierte Listen mit Kreisen per HTML und CSS erstellen (ohne Bilder)

Du kannst die Zahlen einer geordneten Liste (<ol>) wie unten gezeigt mit einem Kreis umgeben, ohne Bildformate wie JPG oder PNG zu verwenden. So sparst du Entwicklungs- und Ladezeit für deine Website.

Demo: So sieht es aus

CSS

Kopiere den folgenden Code und füge ihn in deine CSS-Datei ein.

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

Kopiere den folgenden Code und füge ihn in dein HTML-Dokument ein.

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

Du kannst sowohl das CSS als auch das HTML in deine Datei kopieren und nach Belieben anpassen. Viel Spaß beim Programmieren!

Hinweis: Diese Selektoren gelten für jede geordnete Liste auf der Seite. Um sie auf eine Liste zu beschränken, gib ihr eine Klasse (zum Beispiel ol.circled) und ergänze sie in jedem Selektor. Die Zahlen verwenden die Schrift Lato und fallen auf Helvetica oder Arial zurück, falls Lato nicht geladen ist.