Meine liebsten CSS Code Snippets: Listen und Aufzählungen richtig formatieren

Aus der Reihe meine liebsten CSS Code Snippets für WordPress & Elementor. Heute: Bullet Points, Nummerierungen & Co – Aufzählungen richtig formatieren. Mit CSS Code.

Du kennst das bestimmt: Du schreibst einen schönen Blogartikel, strukturierst ihn mit Bullet Points oder nummerierten Listen – und plötzlich sieht alles irgendwie … unrund aus.

Mal klebt der letzte Punkt zu nah am nächsten Absatz, mal ist der Einzug zu tief – und das Gesamtbild wirkt einfach nicht stimmig.

Damit ist jetzt Schluss! Ich zeige Dir heute eines meiner liebsten kleinen CSS Code Snippets, mit dem Du Listen in Deinem Blog oder auf Deiner Website richtig hübsch formatieren kannst.

Exkurs: Warum eigentlich diese Listen?

Listen – also eine Aufzählung mit Bullet Points oder Nummerierungen – sind eine der beliebtesten Formate im Web. Kein Wunder: Menschen lesen am Bildschirm anders als auf Papier. Sie scannen Texte, statt sie Wort für Wort zu lesen. Überschriften, Aufzählungen und klare Strukturen helfen ihnen dabei, Inhalte schneller zu erfassen.

Mit Bullet Points oder nummerierten Listen kannst Du Informationen übersichtlich gliedern, Highlights hervorheben und Deinen Leser:innen das Gefühl geben, sich leicht zurechtzufinden – perfekt für Blogartikel, Tippsammlungen oder Schritt-für-Schritt-Anleitungen.

Das Problem: Unschöne Abstände bei Listen

Standardmäßig bringen Browser ihre eigenen Abstände und Einzüge für Listen mit. Das ist zwar praktisch – aber selten schön.

Gerade, wenn Du mit Elementor arbeitest oder Dein Theme eigene Stilvorgaben hat, wirken Listen schnell unruhig:

• Der Abstand zum nachfolgenden Absatz ist zu klein.
• Die Bullet Points stehen zu weit eingerückt.
• Oder die Nummerierung tanzt aus der Reihe.

Die Lösung: Ein bisschen Magie in Form von CSS

Mit ein paar gezielten Zeilen CSS kannst Du Deine Listen ganz einfach in Form bringen.

CSS Code Snippet zum Kopieren

/** ABSTAND NACH LETZTEM BULLET POINT **/
ul {
    margin-bottom: 1.5em;
    margin-left: -1em;
}

#ia ul {
    margin-bottom: initial;
    margin-left: initial;
}

/** ABSTAND NACH LETZTEM NUMMERIERTEN POINT **/
ol {
    margin-bottom: 1.5em;
    margin-left: -1em;
}

#ia ol {
    margin-bottom: 1em;
    margin-left: 1em;
}

/** ABSTAND ZWISCHEN DEN LISTENELEMENTEN **/
li {
    margin-bottom: 0.5em;
}

#ia li {
    margin-bottom: 1.5em;
}

Zum besseren Verständnis: Was der Code macht

ul und ol
Diese beiden Selektoren kümmern sich um die äußeren Abstände der Listen. Mit margin-bottom: 1.5em; bekommt Deine Liste etwas mehr Luft nach unten – so wirkt sie optisch klarer getrennt vom nächsten Absatz.

ul ist dabei die Unordered List, also klassische Bulletpoints, während ol die Ordered List ist, also mit Nummeriereungen. 1.5em ist dabei das 1,5-fache Deiner gewählten Schriftgröße.

Das margin-left: -1em; rückt die Bullet Points bzw. Zahlen leicht nach links, sodass sie bündiger mit Deinem Text abschließen.

li
Hier stellst Du den Abstand innerhalb der Liste ein. li ist dabei jeder einzelne Punkt innerhalb einer Ordered der Unordered List, also eine Zahl oder ein Bullet Point.
margin-bottom: 0.5em; sorgt dafür, dass die einzelnen Punkte nicht zu dicht beieinanderkleben, also zwischen den einzelnen Punkten etwas Luft ist.

Wo fügst Du den CSS Code ein?

Den Code kopierst Du und fügst ihn in Deine Website an, am Besten übergeordnet in den Elementor Website-Einstellungen, damit er auf allen Unterseiten greift, wo ein Textblock mit dem Text Editor im Einsatz ist.

Und was hat es mit #ia auf sich?

Ich nutze #ia, um das Elementor Table of Contents Widget von diesen Regeln auszuschließen.

Denn sonst würde auch das Inhaltsverzeichnis plötzlich andere Abstände bekommen – und das wollen wir natürlich nicht. Mit den #ia-Regeln setze ich die ursprünglichen Werte einfach wieder zurück (initial), damit dort alles bleibt, wie es ist 😊

Damit das Code Snippet bei der Inhaltsangabe nicht greift, muss ich dieser die CSS-ID „#ia“ ohne Raute geben. Das mache ich unter Table of Contents bearbeiten > Advanced > Layout > CSS ID und füge dort „ia“ in das Feld ein.

Fazit

Mit diesem kleinen, feinen CSS Snippet wirken Deine Listen sofort strukturierter und harmonischer – ganz ohne zusätzliche Einstellungen in Elementor oder Deinem Theme.

Viel Spaß bei Copy & Paste! Probiere es mal aus und schau, wie viel runder Dein Textfluss damit wirkt!

Und wenn Du magst, verrate mir gern in den Kommentaren: Wie gestaltest Du Deine Listen am liebsten – klassisch, minimalistisch oder mit kleinen Icons als Bullet Points? 💬