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
  1. Lorem ipsum dolor sit amet, consectetuer elit.
  2. Aenean commodo ligula eget dolor.
  3. um sociis natoque penatibus et magnis.
  4. 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: #78AD80;
}
  1. Lorem ipsum dolor sit amet, consectetuer elit.
  2. Aenean commodo ligula eget dolor.
  3. um sociis natoque penatibus et magnis.
  4. Integer tincidunt. Cras dapibus

Beispiel 2:

  • HTML
  • CSS
  1. Lorem ipsum dolor sit amet, consectetuer elit.
  2. Aenean commodo ligula eget dolor.
  3. um sociis natoque penatibus et magnis.
  4. 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: #6ab04b;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px 0 0;
}
  1. Lorem ipsum dolor sit amet, consectetuer elit.
  2. Aenean commodo ligula eget dolor.
  3. um sociis natoque penatibus et magnis.
  4. 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
  1. Headline 1
  2. Lorem ipsum dolor sit amet, consectetuer elit.
  3. Aenean commodo ligula eget dolor.
  4. Headline 2
  5. 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: #6ab04b;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	margin: 0 10px 0 0;
}
  1. Headline 1
  2. Lorem ipsum dolor sit amet, consectetuer elit.
  3. Aenean commodo ligula eget dolor.
  4. Headline 2
  5. 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.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.