kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Farbige Listenpunkte mit CSS ::marker

Geordnete und ungeordnete Listen erhalten vom Browser ein Standard-Styling für Aufzählungspunkte: <ol> wird nummeriert, <ul> erhält grafische Aufzählungszeichen. Diese Aufzählungszeichnen lassen sich mit der CSS-Eigenschaft list-style-type gestalterisch verändern, doch bleiben sie immer in Farbe des Textes. Mit der Pseudoklasse ::marker könnt ihr die Aufzählungszeichen umfärben. In Kombination mit counter() sogar noch weiter anpassen.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Listenpunkte umfärben

Um Listenpunkte einzufärben genügt es, die CSS Peudoklasse ::marker auf das <li>-Element anzuwenden. Der folgende Code färbt für geordnete sowie für ungeordnete Listen die Aufzählungszeichen grün ein.

ul li::marker, 
ol li::marker {
  color: #8CB11C;
}
Eingefärbte Listenpunkte mit der Pseudoklasse ::marker

Individuelle, nummerierte Aufzählungen

Wenn es noch etwas stärker individualisiert werden soll, dann könnt ihr beispielsweise eine <ul> mit list-style-type: square; mit quadratischen Listenpunkten gestalten. Noch etwas stärker angepasst wird es mit Hilfe der CSS-Funktion counter().

/* Custom UL */
.ul-custom {
   list-style-type: square;
}

/* Custom OL */
.ol-custom {
   list-style: none;
   counter-reset: kb-count-ol;
}

.ol-custom li {   
   counter-increment: kb-count-ol;
   padding: 0 0 0 .5em;
}

.ol-custom li::marker {
   content: "[" counter(kb-count-ol) "]";
   color: #8CB11C;
   font-weight: bold;
   font-family: monospace;
   font-size: 1.4em;
}
Stärker angepasste Listen mit counter() / list-style-type und ::marker

Beispiel anschauen

Browser-Support

Der Browser-Support für ::marker ist gut. Den detaillierten Support findet ihr bei caniuse.com.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.