Individuelles List Styling für ul li / ol li
Verfasst am 27.11.2018
Update 24.06.2025
In diesem Beitrag möchte ich Euch zeigen, wie Ihr ganz einfach individuelle Styles für Auflistungen mit CSS erstellen könnt, denn oft kommt es vor, dass man aus Designtechnischen Gründen die Zahlen vor der Aufzählung individuell designen oder in einem anderen Beispiel Icons davor setzen möchte ohne dabei das HTML zu ändern.
Das schöne: Mit
counter-incrementfunktioniert dies kinderleicht
Auflistungen individuell stylen – so geht’s
Im folgenden möchte ich euch einige Beispiele zeigen, wie Ihr die Auflistungsnummern mit CSS Stylen könnt:
Beispiel 1:
- HTML
- CSS
HTML
<ol class="first">
<li>Lorem ipsum dolor sit amet, consectetuer elit.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>um sociis natoque penatibus et magnis.</li>
<li>Integer tincidunt. Cras dapibus</li>
</ol>
CSS
ol.first {
list-style: none;
counter-reset: my-first-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 16px;
}
ol.first li {
counter-increment: my-first-counter;
display: flex;
width: 50%;
font-size: 16px;
line-height: 20px;
padding: 5px 0;
}
ol.first li::before {
content: '0' counter(my-first-counter);
font-weight: bold;
font-size: 40px;
margin-right: 10px;
line-height: 40px;
color: #5dd39e;
}
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- um sociis natoque penatibus et magnis.
- Integer tincidunt. Cras dapibus
Beispiel 2:
- HTML
- CSS
HTML
<ol class="second">
<li>Lorem ipsum dolor sit amet, consectetuer elit.</li>
<li>Aenean commodo ligula eget dolor.</li>
<li>um sociis natoque penatibus et magnis.</li>
<li>Integer tincidunt. Cras dapibus</li>
</ol>
CSS
ol.second {
counter-reset: my-second-counter;
margin: 0;
padding: 24px;
list-style: none;
}
ol.second li {
counter-increment: my-second-counter;
font-size: 14px;
line-height: 40px;
padding: 5px 0;
width: 100%;
list-style: none;
display: inline-block;
}
ol.second li::before {
content: counter(my-second-counter) '.)';
display: inline-block;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: #5dd39e;
color: #fff;
font-size: 16px;
font-weight: bold;
margin: 0 10px 0 0;
}
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- um sociis natoque penatibus et magnis.
- Integer tincidunt. Cras dapibus
Beispiel 3:
- HTML
- CSS
HTML
<ul class="third">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li>
<li>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</li>
<li>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.</li>
<li>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</li>
</ul>
CSS
ul.third {
margin: 0;
padding: 24px;
list-style: none;
}
ul.third li {
font-size: 14px;
line-height: 26px;
padding: 5px 0;
width: 100%;
list-style: none;
display: inline-block;
}
ul.third li::before {
content: '';
display: inline-block;
float: left;
width: 26px;
height: 26px;
background-image: url('https://www.revilodesign.de/media/play-button.svg');
background-repeat: no-repeat;
background-size: 26px 26px;
margin: 0 10px 0 0;
}
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
- Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
- Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus.
- Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.
Beispiel 4: Element überspringen / auslassen
- HTML
- CSS
HTML
<ol class="fourth">
<li class="subheadline">Headline 1</li>
<li class="list">Lorem ipsum dolor sit amet, consectetuer elit.</li>
<li class="list">Aenean commodo ligula eget dolor.</li>
<li class="subheadline">Headline 2</li>
<li class="list">Integer tincidunt. Cras dapibus</li>
</ol>
CSS
ol.fourth {
counter-reset: my-second-counter;
margin: 0;
padding: 24px;
list-style: none;
}
ol.fourth li {
font-size: 14px;
line-height: 40px;
padding: 5px 0;
width: 100%;
list-style: none;
display: inline-block;
}
ol.fourth li.list {
counter-increment: my-second-counter;
}
ol.fourth li.subheadline {
font-weight: bold;
padding: 0 0 0 50px;
}
ol.fourth li.list::before {
content: counter(my-second-counter);
display: inline-block;
float: left;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background: #5dd39e;
color: #fff;
font-size: 16px;
font-weight: bold;
margin: 0 10px 0 0;
}
- Headline 1
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- Headline 2
- Integer tincidunt. Cras dapibus
Ich hoffe meine Beispiele zeigen wie man die Auflistung mit Styles individuell gestalten kann. Solltet Ihr noch Fragen, Anregungen oder Umsetzungswünsche haben, dann lasst es mich wissen und schreibt Sie in die Kommentare. Ich versuche Sie so schnell wie möglich zu beantworten bzw. oder umzusetzen.
2 Likes
Hinterlasse doch ein Kommentar
Schreibe ein Kommentar zu Individuelles List Styling für ul li / ol li
Wenn dir der Beitrag Individuelles List Styling für ul li / ol li gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.