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

1. Peaches
2. Apples
3. 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>

1. Peaches
2. Apples
3. 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

<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>

<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

PHP - Kalenderwoche

JavaScript - Bild mit dem Mausrad vergrößern

MySQL - Flexible Insert-Funktion