Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Alexander Rutz
    schrieb am 20.04.2016 um 15:18 Uhr:

    Oder ohne ::not:

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

    Antworten
    • Alexander Rutz
      schrieb am 20.04.2016 um 15:19 Uhr:

      Den Teil hinter content: hat es wohl zerbastelt …

      Antworten
    • Jonas Hellwig (Autor)
      schrieb am 21.04.2016 um 19:28 Uhr:

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

      Antworten
  2. hans
    schrieb am 04.04.2016 um 11:09 Uhr:

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

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →