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.

<meter> Meter

CSS - Display-Flex mit Tabellen

PHP - Kalenderwoche

JavaScript - Bild mit dem Mausrad vergrößern

MySQL - Flexible Insert-Funktion

Navigation in Dokumenten
Bei langen Textdokumenten sollten Sie dem Besucher die Möglichkeit bieten an den Seitenanfang bzw. an das Seitenende zu springen. Am Seitenanfang und -ende ist es ratsam eine Menüleiste anzubieten. So kann der Besucher schnell zwischen den einzelnen Unterseiten wechseln.