individual numbers for a list with counter and :before

by Jens Grochtdreis

HTML

<ul>
    <li>Aber Kay, der kleine Kay! fragte Gerda. Wann kam er? Befand er sich unter der Menge?</li>
    <li>Eil mit Weile! nun sind wir gerade bei ihm! Am dritten Tage kam eine kleine Person, weder mit Pferd, noch mit Wagen, ganz lustig und guter Dinge gerade auf das Schloss hinaufspaziert. Seine Augen blitzten wie deine, er hatte prächtiges langes Haar, aber sonst ärmliche Kleider.</li>
    <li>Da war Kay! jubelte Gerda. O, dann habe ich ihn gefunden und dabei klatschte sie in die Hände.
</li>
    <li>Er hatte einen kleinen Ranzen auf seinem Rücken! sagte die Krähe.</li>
    <li>Nein, das war sicherlich sein Schlitten! sagte Gerda, denn damit ging er fort!</li>
</ul>

CSS

/* reset the list */
ul {list-style-type: none; margin:0; padding:0;}

/* counter */
ul{counter-reset: li;}
li:before {content: counter(li); counter-increment: li;}

/* simple styling */
li {margin: 0 0 10px 0; padding: 0 0 0 25px;position: relative;}
li:before {border-radius: 50%; background: #a20000; color: #fff; position: absolute; top: 2px; left: 0;padding: 5px; font-size: 10px; font-weight: bold;line-height: 10px;}



/* basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}