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

[amazon bestseller="computer" items="1"]

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.