CSS list-style-type • Listensymbole

Automatische Listensymbole

Natürlich kann man Listen mit einem führenden Punkt, Spiegelstrich oder Zahl in Handarbeit setzen – dafür ist allerdings mehr HTML-Markup und CSS nötig, das am Ende nur schwer zu überschauen ist. Bei Änderungen geht der Aufbau verloren, die Nummerierung der Aufzählung muss erneut in Angriff genommen werden.

Dafür hat HTML die Elemente ul für ungeordnete Listen und ol für geordnete Listen sowie das li-Tag für die einzelnen Punkte der Liste. CSS bestimmt dann die Feinheiten.

Wie die Browser ul und ol formatieren

Die Browser ziehen die Einträge automatisch um 40 Pixel von links ein.

ol, ul {
   display: block;
   list-style-type: decimal; // bei ol
   list-style-type: disc;    // bei ul
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 40px;
}

Setzt man padding-left auf 0, sitzt der Inhalt der li-Elemente zwar exakt auf dem linken Rand des umfassenden Blocks, aber Listensymbole und der Index von nummerierten Listen liegt dann außerhalb und vor dem linken Rand.

Erst padding-left: 1em richtet Symbole und Index am linken Rand aus (bei alten Versionen von IE war es noch margin-left: 1em).

• Leonard Cohen
  First we take Manhattan
• Kamasi Washington
  How to tame lions
• Woodkit
  Que Te Mate el Desierto

list-style-type

Die CSS-Eigenschaft list-style-type wirkt nur bei Elementen, die Listenelemente darstellen können – das sind ul- und ol-Elemente.

Erblich: Ja

list-style-type

bestimmt das Aufzählungssymbol in einer Liste: gefüllte oder ungefüllte Kreise in ungeordneten Listen, alphabetische und numerische Werte in geordneten Aufzählungen. Sowohl in geordneten als auch in ungeordneten Listen kann das Listensymbol durch die Angabe von none unterdrückt werden.

Werte

disc (• • •) | circle (○ ○ ○) | square (▪ ▪ ▪)| decimal (1 2 3)
decimal-leading-zero (01, 02, 03) | lower-roman (i ii iii) | upper-roman (I II III) | lower-greek (α β γ) | lower-latin / lower-alpha (a b c) | upper-latin / upper-alpha (A B C) | armenian (Ա Բ Գ) | georgian (ა ბ გ) | disclosure-open | disclosure-closed

Neueren Datums sind disclosure-open und disclosure-closed als Werte für ungeordnete, die besonders nützlich für Menüs oder Akkordeon-Elemente sind.

• CSS
• HTML
• Javascript
  • Basis
  • Webseiten
• Tutorial
• SVG

ul.disclosure {
	list-style-type: disclosure-closed;
}

/* Zeige Listenelemente mit einer 
Unterliste mit geöffnetem Dreieck */
ul.disclosure li:has(ul) {
	list-style-type: disclosure-open;
}

disc, circle, square, decimal sowie lateinische und romanische Symbole stellen alle Browser seit ewig und drei Jahren korrekt dar.

Listen mit ::marker

Eigene Listenzeichen um Sonderzeichen, Farben, Emojis oder Schrift lassen sich am einfachsten mit ::marker festlegen. Allerdings spielt Safari, der Apple-Browser, nur bei Farben und Schriftgröße mit. Emojis werden unterschlagen.

ul.char li::marker {
	content: "📆 ";
}

• Montag
• Dienstag
• Mittwoch

Wer also Wert auf ein eigenes Symbol für alle Listeneinträge legt, braucht weiterhin den etwas umständlichen Weg:

• Montag
• Dienstag
• Mittwoch

ul.days { list-style-type:none;}
ul.days li:before { content: "📆 "; }