li
<li> </li>
<ol> </ol>
<ul> </ul>
Einrücken der ul/ol entfernen
padding-left: 0;
list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
individuelle Punkte via content
list-style-image: url('Dateiname.gif');
list-style-position: outside | inside (ol oder ul ansprechen)
- inside
- outside
::marker ol li::marker (es muss li angesprochen werden)
- Gurken
- Äpfel
- Weintrauben
- Gurken
- Äpfel
- Weintrauben
- Gurken
- Äpfel
- Weintrauben
::marker besondere Zählungsdarstellung auch ohne Listen
Das zu zählende Element: counter-increment: zähler (Erhöht den Zählwert der "Variable": zähler); display: list-item; ggf. margin-left;
Element::marker: content: "counter(zähler) (Funktion des Zählens)";
Kombinationen möglich: counter(zähler, upper-roman)
counter Etwas komplexer mit counter vs. counters
counter-reset: counter - Erstellt einen Zähler namens counter
counter-increment: counter - Erhöht den Zählwert von counter
content - Ermöglicht das Hinzufügen von Inhalt
counter() or counters() Funktion, die die Zählung einem Element zuweist
Es müssen keine Listen für diese Counter verwendet werden.
Wir geben zuerst dem parent-Element einen counter-reset: menu;
Dann dem Element des Unterpunkts counter-reset: submenu;
h1::before {counter-increment: menu; content: counter(menu)
h2::before {counter-increment: submenu; content: counter(menu)"."counter(submenu)
Menü
Unterpunkt
Unterpunkt
Menü
Unterpunkt
Unterpunkt
Menü
Unterpunkt
Unterpunkt