Custom List Styles mit CSS
Oft möchten Kunden oder die Designer, dass die Listen an die Gestaltung der Website angepasst werden. Das sorgt für ein einheitliches Erscheinungsbild und verbessert die Lesbarkeit sowie die Benutzererfahrung. Wir zeigen Dir in diesem Artikel, wie Du sowohl Aufzählungspunkte als auch Nummerierungen durch Custom List Styles mit CSS verändern kannst.
Individuelle Icons für Listenelemente lassen sich auf mindestens drei Wegen realisieren: 1. mittels :before, 2. durch die @counter-style-Methode und 3. mit der Methode @symbols().
1. Methode: CSS-Klasse mit :before
Diese Methode nutzt Pseudo-Elemente, um vor jedem Listenelement ein Symbol oder eine Grafik hinzuzufügen.
Vorteile:
Einfach zu implementieren.
Unterstützt in allen modernen Browsern.
Flexibel in Bezug auf die Gestaltung.
Nachteile:
Manuelles Hinzufügen zu jedem Listenelement, falls verschiedene Indikatoren verwendet werden sollen.
Kann bei komplexen Listen unübersichtlich werden.
Beispiel:
/* Methode 1: CSS-Klasse mit :before */
ul.custom-list {
padding-left: 20px;
}
.custom-list li {
list-style: none;
position: relative;
padding-left: 20px;
}
.custom-list li::before {
content: "→";
position: absolute;
left: 0;
color: #000;
}<h3>:before</h3>
<ul class="custom-list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
2. Methode: @counter-style
Mit @counter-style kannst Du eigene Zählerstile definieren, die Du für Listen verwenden kannst.
Vorteile:
Erlaubt die Definition von benutzerdefinierten Zählersymbolen.
Wiederverwendbar und sauber im Code.
Nachteile:
Unterstützt nicht alle älteren Browser.
Erfordert ein tieferes Verständnis von CSS.
Beispiel:
/* Methode 2: @counter-style */
@counter-style arrow {
system: cyclic;
symbols: "→" "↓" "←";
suffix: " ";
}
.custom-counter {
list-style: arrow;
}<h3>@counter-style</h3>
<ul class="custom-counter">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>3. Methode: symbols()
Diese Methode nutzt die symbols() Funktion, um benutzerdefinierte Symbole für Listen zu erstellen.
Vorteile:
Sehr spezifisch und anpassbar.
Wenig Code.
Kann komplexe Symbole und sogar Bilder verwenden.
Nachteile:
Eingeschränkte Browserunterstützung (bspw. Firefox✅ Chrome ????)
Komplexität kann den Code schwer lesbar machen.
Beispiel:
ul.custom-symbols {
list-style: symbols(cyclic "→" "↓" "←");
}<h3>symbols()</h3>
<ul class="custom-symbols">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>Kompatibilität
Zusammenfassung
Jede Methode hat ihre eigenen Vor- und Nachteile, abhängig von den Anforderungen und der Komplexität des Projekts. Mit den hier vorgestellten Techniken kannst Du die Darstellung Deiner Listen flexibel und ansprechend gestalten.
