Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Zurück zur Übersicht
CSS: Ordered List Nummer stylen nur mit CSS
#Tutorials#HTML#CSS
Ich habe hier mal einen kleinen CSS Trick gefunden, um bei Ordered Lists (OL-Tags) die Zahlen anders zu stylen als den Text ohne dabei das Markup ändern zu müssen.
Das Ganze klappt in allen Browser und sogar ab dem IE8. Diese Methode benutzt den CSS counter, der dann einfach bei jedem Durchlauf hochzählt und somit die aufsteigenden Zahlen erzeugt. Diese werden dann mit before vor den Text der Listeneinträge geschrieben.
CSS
body {
counter-reset: item;
}
ol {
list-style: none;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
margin-right: 10px;
content: counter(item);
background: lightblue;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}
HTML Markup
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Demo
- item
- item
- item
- item
Kommentare
Hinterlasse einen Kommentar