Kommaseparierte Listen mit CSS
Mit dem CSS-Selektor :last-child und einem Pseudoelement, können HTML-Listenpunkte durch Komma getrennt dargestellt werden.
Eine HTML-Liste wird üblicherweise untereinander und mit Aufzählungszeichen dargestellt. Häufig wünscht man sich jedoch auch eine horizontale Darstellung, bei der die einzelnen Listenelemente nebeneinander stehen und mit Komma von einander getrennt sind. Nur hinter dem letzten Element soll natürlich kein Komma mehr stehen. Mit Hilfe der CSS-Pseudoklasse :not
und des -Pseudoelements ::after
kann die gewünschte Ansicht elegant hergestellt werden.
Listenpunkte mit Komma trennen
Der Aufbau ist denkbar einfach: Zunächst werden die Listenpunkte per Float, Inline-Block oder Flexbox horizontal nebeneinander ausgerichtet. Anschließend verwenden wir das Pseudoelement ::after
um nach jedem Listenpunkt ein Komma einzufügen.
Da allerdings nach dem letzten Listenpunkt kein Komma angezeigt werden soll, und wir zum Entfernen des Kommas auch keinen zusätzlichen CSS-Selektor verwenden möchten, kommt die Pseudoklasse :not()
ins Spiel. Innerhalb von :not()
kann festgelegt werden, was nicht zutreffen darf, damit das Element selektiert wird. Daher notieren wir innerhalb von :not()
die Pseudoklasse :last-child
.
li:not(:last-child)::after {
content:', ';
}
Oder ohne ::not:
li + li::before {
content:‘, ‚;
}
Den Teil hinter content: hat es wohl zerbastelt …
Ja – auch sehr fein! Danke für die Ergänzung.
Danke für den Tip, denke ich werde in Zukunft mal mehr „:not“ benutzen.