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

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

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.

<nav> Navigationsbereich

CSS - Leuchtende blaue Eingabefelder

PHP - Zufallsgenerator (Lottozahlen)

JavaScript - https und den Querystring aus der URL entfernen

MySQL - Benutzer nach 1 Stunde zurücksetzen