CSS - Listenelemente einfärben
Das ::marker
CSS-Pseudoelement wählt das Markerfeld eines Listenelements aus, das in der Regel ein Aufzählungszeichen oder eine Zahl enthält.
Diese Listenelemente kann man nun über CSS gestalten.
Aufzählungslisten
- Peaches
- Apples
- Plums
<style> ul.beispiel1 li::marker { color: Red; font-size: 1.5em; } </style> <ul class="beispiel1"> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ul>
- Peaches
- Apples
- Plums
<style> ul.beispiel2 { list-style-type: square; } ul.beispiel2 li::marker { color: #FFD700; font-size: 1.5em; } </style> <ul class="beispiel2"> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ul>
Nummerierte Listen
- Peaches
- Apples
- Plums
<style> ol.beispiel3 li::marker { color: Red; font-size: 1.5em; } </style> <ol class="beispiel3"> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ol>
- Peaches
- Apples
- Plums
<style> ol.beispiel4 { list-style-type: upper-alpha; } ol.beispiel4 li::marker { color: #FFD700; font-size: 1.5em; } </style> <ol class="beispiel4"> <li>Peaches</li> <li>Apples</li> <li>Plums</li> </ol>
Offenlegungs-Vorrichtung
Fruits
Peaches
Apples
Plums
<style> summary.beispiel5::marker { color: Red; font-size: 1.5em; } </style> <details> <summary class="beispiel5">Fruits</summary> <p>Peaches</p> <p>Apples</p> <p>Plums</p> </details>
Fruits
Peaches
Apples
Plums
<style> summary.beispiel6::marker { color: #FFD700; font-size: 1.5em; } </style> <details> <summary class="beispiel6">Fruits</summary> <p>Peaches</p> <p>Apples</p> <p>Plums</p> </details>
Siehe auch: Checkboxen und Radiobuttons farblich anpassen
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<meter> Meter
CSS - Display-Flex mit Tabellen