kulturbanause Blog

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

Kommaseparierte Listen mit CSS

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.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

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:', ';

Beispiel anschauen

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

4 Kommentare

  1. hans

    Verfasst am 4. April 2016 um 11:09 Uhr.

    Danke für den Tip, denke ich werde in Zukunft mal mehr „:not“ benutzen.

  2. Alexander Rutz

    Verfasst am 20. April 2016 um 15:18 Uhr.

    Oder ohne ::not:

    li + li::before {
    content:‘, ‚;
    }

    • Alexander Rutz

      Verfasst am 20. April 2016 um 15:19 Uhr.

      Den Teil hinter content: hat es wohl zerbastelt …

    • Jonas Hellwig

      Verfasst am 21. April 2016 um 19:28 Uhr.

      Ja – auch sehr fein! Danke für die Ergänzung.

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.