Listen in HTML/Gestaltung mit CSS
Listen bringen von Haus aus eine klare Semantik mit, ihre Darstellung variiert jedoch je nach Browser. Mit CSS lässt sich das Erscheinungsbild heute sehr flexibel anpassen – ohne die semantischen Vorteile aufzugeben. Gerade weil die Standarddarstellung oft als störend empfunden wird, wird in der Praxis noch zu häufig auf Listen verzichtet. Dabei ist das längst nicht mehr notwendig: Moderne CSS-Techniken ermöglichen eine individuelle Gestaltung bei gleichzeitig sauberer Struktur.
Inhaltsverzeichnis
Der klassische Weg
Die Eigenschaft list-style ist die Kurzschreibweise, mit der sich die wichtigsten Darstellungsoptionen von Listen in einer einzigen Anweisung festlegen lassen. Dazu gehören der Aufzählungstyp (list-style-type), die Position (list-style-position) und optional ein eigenes Bild (list-style-image).
list-style-type
Die Eigenschaft list-style-type beinflusst
- für Aufzählungslisten (
ul) das Erscheinungsbild des Bullet-Zeichens; - für nummerierte Listen (
ol) die Darstellung der Durchnummerierung.
Man kann die Eigenschaft für die Liste, aber auch für das Listenelement setzen.[1] [2]
Erlaubt ist unter anderem eine der folgenden Angaben:
- für ungeordnete Listen (
ul)disc, Standardwert gefüllter Kreis als Bullet-Zeichencircle, leerer Kreis als Bullet-Zeichensquare, quadratisches Bullet-Zeichennone, kein Bullet-Zeicheninherit, Bullet-Zeichen des Elternelements
- für geordnete Listen (
ol)decimalNummerierung 1., 2., 3., 4. usw.decimal-leading-zero, Nummerierung 01., 02., 03., 04. usw.lower-roman, Nummerierung i., ii., iii., iv. usw.upper-roman, Nummerierung I., II., III., IV. usw.lower-alpha, Nummerierung a., b., c., d. usw.lower-latin, ebensoupper-alpha, Nummerierung A., B., C., D. usw.upper-latin, ebensonone, keine Nummerierunginherit, Nummerierung des Elternelements
Durch das Attribut start im Starttag einer geordneten Liste kann man die Nummerierung beeinflussen; das Setzen des reversed-Attributs bewirkt eine Umkehrung der Zählrichtung.
Außerdem gibt es Nummerierungen in vielen verschiedenen Sprachen wie z. B. hebräisch, chinesisch usw.
ul.first {list-style-type: disc;}
ul.second {list-style-type: circle;}
ol.first {list-style-type: decimal;}
ol.second {list-style-type: lower-roman;}
frei wählbare Aufzählungszeichen
Es können aber auch eigene Aufzählungszeichen durch die Angabe einer Zeichenkette, etwa list-style-type: "P"; oder list-style-type: "Punkt"; festgelegt werden. Die breite Browserunterstützung für freie Strings und @counter-style ist seit Safari Version 17 gegeben, die symbols() Angabe wird bisher (April 2025) nur von Firefox unterstützt. Bitte überprüfe die caniuse-Informationen, bevor du damit Webseiten gestaltest.
/* Variante mit string */
.zeichenkette {
list-style-type: "♥ ";
}
Mit list-style-type kann das Aufzählungszeichen für die Liste festgelegt werden, eine Farbzuweisung trifft ebenfalls auf die Liste, d.h. auf Aufzählungszeichen und die Listenelemente selbst zu.
@counter-style box-set {
system: cyclic;
symbols: '◽' '◾' '▹';
suffix: ' ';
}
.symbols {
list-style-type: box-set;
}
Mehr zu @counter-style findest du im Artikel CSS/@-Regeln/@counter-style.
.anon-symbols {
list-style-type: symbols(cyclic '♣' '♠' '♥' '♦');
}
Mit diesen Methoden kann man entweder genau ein beliebiges Zeichen oder eine Zeichenkette als Aufzählungszeichen verwenden, oder eine eigene Abfolge von Aufzählungszeichen definieren. Eine weitere Formatierung ist allerdings nicht möglich.
Diese könnte man erreichen, indem man die Aufzählungszeichen mit list-style-type: none; ausblendet und durch ein Pseudoelement ersetzt, welches dann unabhängig vom Listenelement gestylt werden kann. Dies wird im nächsten Abschnitt Aufzählungszeichen anders gezeigt.
list-style-position
Die Eigenschaft list-style-position bestimmt, ob die mit list-style-type oder list-style-image festgelegten Aufzählungszeichen innerhalb oder außerhalb des Listenelements positioniert werden.
ul { max-width: 15em; border: 1px solid blue; }
li { background-color: lightblue; margin: 2px; }
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
Interessant ist diese Eigenschaft erst, wenn die Texte der Aufzählungselemente länger werden, weil es dann tatsächlich unterschiedliche Darstellungsformen gibt. So wird bei list-style-position: inside nur die erste Zeile eingerückt, um Platz für das Aufzählungszeichen zu schaffen.
list-style-image
Die Eigenschaft list-style-image bestimmt eine eigene geeignete Grafik als Aufzählungssymbol.
Als Wert für list-style-image wird eine url(Pfad)-Funktion angegeben. Wenn die Grafik in einem anderen Verzeichnis steht, muss man den relativen oder absoluten Pfadnamen angeben. Das funktioniert genau so wie beim Einbinden von Grafiken in HTML.
Der Einsatz von solchen Rastergrafiken hat mehrere Nachteile:
- sie lassen sich nicht genau positionieren
- sie passen sich nicht unterschiedlichen Standardschriftgrößen an
- auf hochauflösenden Bildschirmen sehen sie pixelig aus.
Man kann die Grafiken auch als Pseudoelemente realisieren:
.archiv {
list-style: none;
}
.archiv li::before {
content: url('pdf.gif');
}
Die beiden letztgenannten Nachteile bleiben auch hier.
Alternativen wären der Einsatz von SVG-Icons oder von Unicode-Zeichen.
Modernes Styling mit ::marker
Man kann Aufzählungszeichen mit list-style formatieren, aber z. B. Aufzählungszeichen nicht abweichend von der Textfarbe einfärben.
Mit dem Pseudo-Element ::marker kannst du das Aufzählungszeichen oder die Nummer eines Listenelements direkt stylen – ohne die integrierte Semantik der Liste zu beeinträchtigen. Es bietet eine einfache, moderne Möglichkeit, das Aussehen von Listenmarkierungen anzupassen, während das Standardverhalten der Liste erhalten bleibt.[3][4]
li {
list-style-type: "♥ ";
padding-left: .5em;
}
::marker {
color: red;
content: "I ♥ ";
font-size: 1.5em;
}
Für Browser, die die Formatierung noch nicht unterstützen, wird mit list-style-type ein Herz-Zeichen festgelegt. Der ::marker-Selektor ersetzt dieses Zeichen durch die in content festgelegte Zeichenkette, die jetzt mit color eine eigene Farbe erhält.
Da eine Formatierung mit width, padding oder margin noch nicht möglich ist, erhält das li-Element ein padding-left, um einen Abstand zwischen Aufzählungszeichen und Listeninhalt zu haben.
- alle font-Eigenschaften
- color
- content
- text-combine-upright, unicode-bidi und direction
- white-space
- animation und transition
list-item
CSS definiert einen Counter namens list-item, der automatisch von <ul> und <ol> geschachtelt und zurückgesetzt und von <li> automatisch inkrementiert wird. Man kann in einem ::marker-Pseudoelement in der content-Eigenschaft darauf Bezug nehmen.
ul {
list-style-type: lower-latin;
}
li {
padding-left: 0.5em;
}
li::marker {
content: '(' counter(list-item, lower-latin) ')';
color: red;
}
Diese Liste wird mit Zahlen durchnummeriert, obwohl als list-style-type der Wert lower-latin angegeben wurde. Diese Eigenschaft findet aber bei einer eigenen Erzeugung des Marker-Inhalts keine Anwendung. Um einen bestimmte Listenstil zu forcieren, ist der zweite Parameter von counter() zu verwenden.
als Pseudoelement
Es gibt aber auch Anwendungsfälle, in denen man Aufzählungszeichen völlig unabhängig von Listenelementen formatieren will.
Dieses Beispiel sieht auf den ersten Augenblick ähnlich wie oben aus – beruht aber auf einer anderen Technik. Anstelle des mit list-style-image festgelegten Aufzählungszeichens wird ein Pseudoelement erzeugt, dessen Inhalt im CSS festgelegt ist.
li {
list-style-type: none;
}
li::before {
content: "♥ ";
color: red;
font-size: 1.5em;
}
Mit ::before wird ein Pseudoelement erzeugt. Es erhält über die CSS-Eigenschaft content einen Inhalt. Dies kann eine normale Zeichenkette, oder wie hier, ein Unicode-Symbol sein. Mit color und font-size wird der Inhalt nach Wunsch formatiert.
.pseudo li,
.pseudobackgr {
list-style: none;
margin-bottom: 1em;
}
.pseudo li::before {
content: url('Bandeira_do_Estado_do_Parana.svg');
vertical-align: -10px;
margin-right: 1.5em;
height: 1em;
width: 1.5em;
display:inline-block;
}
.pseudobackgr li::before {
content: ' ';
background-image: url('Flag_of_Brazil.svg');
background-size: 2em 1.33em;
margin-right: 1.5em;
height: 1.33em;
width: 2em;
display:inline-block;
}
Anwendungsbeispiele
Viele Webseiten haben zum Beispiel im Seitenfuß eine kleine einzeilige Navigationsleiste, die semantisch einer (un-) geordneten Liste von Links entspricht.
<ul>
<li><a href="/">Home</a></li>
<li><a href="/impressum">Impressum</a></li>
…
</ul>
Die Darstellung inline stellt alle Listenelemente li unmittelbar fortlaufend dar. Diese werden hier ohne Aufzählungszeichen (list-style-type) dargestellt.
li {
display: inline;
list-style-type: none;
}
In unserem Beispiel soll ein Punkt zwischen den einzelnen Listenelementen auftauchen. Häufig findet man auch das Pipe-Zeichen oder Bindestriche. Daher wird bis auf das erste Element jedem anderen der Punkt vorangestellt.
li:not(:first-child)::before {
content: '• ';
}
Das obige Beispiel mit einer Navigationsleiste kann etwas abgewandelt auch zur Auszeichnung und Darstellung einer sogenannten „Brotkrumen-Navigation“ (bread crumb) verwendet werden:
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Abschnitt</a></li>
<li><a href="#">Unterabschnitt</a></li>
<li><a>diese Seite</a></li>
</ol>
li {
display: inline;
list-style-type: none;
}
li:not(:first-child)::before {
content: "» ";
}
Der Ordnung entsprechend steht hierbei Home an erster, Abschnitt an zweiter und Unterabschnitt an dritter Stelle. Der letzte Eintrag zeigt die aktuelle Seite und ist in diesem Beispiel nicht verlinkt. Andere Brotkrumen-Navigationen (wie auch die in diesem Wiki) verzichten auf die Angabe der aktuellen Seite.
Eine Liste als Zeitstrahl
Im nächsten Beispiel werden zeitliche Ereignisse, die man sonst oft tabellarisch darstellt (z.B. in einem tabellarischen Lebenslauf) in einem Zeitstrahl realisiert.
#zeitleiste {
position: relative;
margin-left: 7.5em;
list-style-type: none;
}
#zeitleiste::before {
position: absolute;
content: "";
bottom: 0;
left: 0;
top: 0;
background: steelblue;
width: 0.4em;
}
#zeitleiste::after {
position: absolute;
content: "";
bottom: -1.3em;
left: -0.8em;
width: 0;
height: 0;
border-width: 1em;
border-style: solid;
border-color: #3983ab transparent transparent transparent;
}
Als HTML-Grundgerüst verwenden wir eine unsortierte Liste, deren Aufzählungszeichen wir mit list-style-type: none; unterdrücken.
Mit den Pseudoelementen :before: und :after werden der Zeitstrahl und der in die Zukunft gerichtete Pfeil dargestellt. Der Pfeil besteht aus einem 0px großen Feld, das nur einen oberen farbigen Rand hat. Da die rechten und linken Seiten einen transparenten Rand haben, entsteht so ein pfeilförmiges Dreieck.
#zeitleiste >li::before{
position: absolute;
content: "";
width: 1em;
height: 1em;
left: -0.5em;
border-radius: 50%;
border: 0.2em solid #3983ab;
background: #dfac20;
}
#zeitleiste >li {
margin-bottom: 3em;
}
Vor die einzelnen Listenelemente wird nun ein gelber Punkt mit blauem Rand gesetzt. Er wird direkt auf der blauen Linie positioniert.
li h3 {
margin: -1em 0 0.2em;
}
time {
display: block;
font-weight: bold;
margin-left: -10em;
width: 6.5em;
text-align:right;
}
<ul id="zeitleiste">
<li><time datetime="1995-06-04">04.06.1995</time>
<h3>SelfHTML geht online.</h3>
</li>
<li><time datetime="1998-01-01">1998</time>
<h3>Das Self-Forum</h3>
Das <strong>Forum</strong> beantwortet Fragen und
wird vom Tummelplatz technikaffiner Webialisten zur Community.
</li>
...
In HTML 4 konnten Listenelemente nur inline-Elemente wie span usw. enthalten.
In HTML5 ist es auch möglich Überschriften und andere Elemente zu verwenden:
- Das time-Element beinhaltet die Zeitangaben und wird durch einen negativen margin-left links neben die Zeitleiste geschoben.
- Die Überschriften bekommen semantisch richtig eine
h3-Überschrift - der Text ist normaler Teil des Listenelements
li
Listen mit Kindelementen
Listen können auch aus Textabsätzen mit mehreren Elementen bestehen. In Kombination mit einem Bild ist diese Anordnung auch als Media-Objekt bekannt.
<ul>
<li>
<img src="frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
<h3>Frühling</h3>
<p>Endlich wird es wieder ein bisschen sonniger und wärmer.
Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
</p>
</li>
...
Innerhalb der Listenelemente befinden sich eine Grafik img, eine Überschrift h3 und ein Textabsatz p.
ul {
list-style-type: none;
width: 30em;
}
li h3 {
font: bold 1.2em/1.5 Helvetica, Verdana, sans-serif;
}
li img {
float: left;
margin: 0 15px 0 0;
width: 5em;
}
li p {
font: 100 0.75em/1.5 Georgia, Times New Roman, serif;
}
li {
padding: 10px;
overflow: auto;
}
li:hover {
background: #F1F3F4;
cursor: pointer;
}
Die Liste erhält eine feste Breite, ihre Listenelemente werden ohne Aufzählungszeichen untereinander dargestellt.
Die Grafiken werden 5em groß skaliert und links gefloatet. Rechts hat die Grafik einen 15px breiten Rand; daneben werden Überschrift und darunter der Textabsatz platziert. Beide erhalten eine typografische Formatierung.
alternative Umsetzung mit display: table-cell
Man kann die Kindelemente auch mit display:table-cell oder flexbox positionieren.
<ul>
<li>
<img src="frühling.png" alt="Bild einer Narzisse, Quelle Wikipedia">
<div>
<h3>Frühling</h3>
<p>Endlich wird es wieder ein bisschen sonniger und wärmer.
Wer jetzt spazieren geht, sieht schon die ersten grünen Knospen sprießen.
</p>
</div>
</li>
...
Innerhalb der Listenelemente befinden sich eine Grafik img, eine Überschrift h3 und ein Textabsatz p. Im Unterschied zum oberen Beispiel benötigt man noch ein ansonsten funktionsloses Wrapper-Element für die untereinander angeordneten h3 und p-Elemente.
li {
display: table;
}
li img {
margin: 0 15px 0 0;
width: 5em;
display: table-cell;
}
li div {
display: table-cell;
}
Das li-Element und das als Wrapper-Element dienende div werden mit display:table-cell nebeneinander positioniert.
Durch die missbräuchliche Verwendung von float zur Gestaltung ganzer Webseiten ist diese Eigenschaft etwas in Verruf geraten. Die Positionierung von Bildern ist jedoch genau der Aufgabenbereich, für die diese Eigenschaft erschaffen wurde.
- CSS/Tutorials/Grid/Einführung
Das Media-Objekt
Weblinks
- ↑ CCSWG: CSS Lists Module Level 3
- ↑ W3C: alle vordefinierten Aufzählungszeichen und Nummerierungen (CSS2.1)
- ↑ W3C: Modul Listen und Counter
- ↑ MDN: ::marker
