Eine Liste wie eine Zeitleiste stylen? CSS Anleitung

von Eric-Oliver Mächler | Jan 9, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3

Inhaltsverzeichnis

Gehen euch die einfachen Listen in HTML auch langsam auf den Wecker? Dann habe ich hier ein Beispiel wie ihr eine Liste verschönern könnt. Mit diesem kleinen Trick kann man aus einer Liste ne Art Timeline machen oder einfach die ganze Liste ein wenig farbenfroher designen.

Video

HTML

<ol>
	<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
	<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
	<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
	<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
	<li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</li>
</ol>

CSS

ol {
	padding: 0;
	margin: 0;
	max-width: 70%; /* grösse der liste einstellen */
	position: relative;
}
 
ol::before {
	content: '';
	width: 0.5rem;
	height:100%;
	position: absolute;
	top: 0;
	left: 10%; /* liste linie abstand*/
	background: rgb(234,185,255);
	z-index: -1;
}
 
 
li {
	background: rgb(185, 239, 255);
	border-radius: 1.5rem;
	padding: 0.5rem 1.5rem 1rem;
	margin-top: 20px; /* liste punkte abstand*/
}
 
::marker {
color: rgba(0,0,0,0) /* punkte durchsichtig machen*/

Eine Liste wie eine Zeitleiste stylen? CSS Anleitung

Video

HTML

CSS

0 Kommentare

Einen Kommentar abschicken Antworten abbrechen

Translate:

Neueste Beiträge

Neueste Kommentare

Webinare

DIVI Theme

Hosting

Häufige Suchanfragen

WordPress

Themen

Gemischtes

Kurse / Webinare