Individuelles List Styling für ul li / ol li
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
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- um sociis natoque penatibus et magnis.
- Integer tincidunt. Cras dapibus
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
Keine Produkte gefunden.
Beispiel 2:
- HTML
- CSS
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- um sociis natoque penatibus et magnis.
- Integer tincidunt. Cras dapibus
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
- 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.
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('/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
- Headline 1
- Lorem ipsum dolor sit amet, consectetuer elit.
- Aenean commodo ligula eget dolor.
- Headline 2
- Integer tincidunt. Cras dapibus
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.
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.