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.

<sub> Physische Auszeichnung

CSS - Lightbox

PHP - Alle Dateien im akt. Verzeichnis und den Unterverz. anzeigen

JavaScript - Bild mit dem Mausrad vergrößern

MySQL - Abrufen eines zweispaltigen Ergebnisses in ein Array

Plug-ins nötig
Man muss schon einen guten Grund haben, um ein Plug-ins (Browser-Erweiterung) zu rechtfertigen. Denn oft haben die Besucher das entsprechende Plug-in nicht und wollen es auch nicht runterladen, abgesehen davon, dass viele Besucher gar nicht wissen, was ein PlugIn ist. Wenn man trotzdem nicht auf Plug-in verzichten möchte, sollte man zumindest eine Alternative anbieten, sonst bekommen viele potenzielle Besucher die Seite nicht zu sehen.