Silas Köhler

Webentwicklung

WordPress Listenblöcke mit CSS Counter stylen

Silas Köhler

|

Vielleicht nutzt du bereits ::before-Pseudo-Klassen, um das Design deiner ungeordneten Listen anzupassen, aber wusstest du, dass das auch mit geordneten Listen funktioniert?

Ohne ::before-Klassen

Für alle Listenblöcke nutzt Gutenberg die HTML-Standardelemente <ul> und <ol> und fügt ihnen seit WordPress 6.6 auch die CSS Klasse wp-block-list hinzu. Wir könnten das Design also auch einfach mit einem alternativen list-style bearbeiten. Weil ich dabei in der Vergangenheit an Grenzen gestoßen bin, habe ich mir jedoch angewöhnt stattdessen mit einer ::before-Pseudo-Klasse zu arbeiten.

Ungeordnete Listen

Das Styling von ungeordneten Listen (<ul>) ist relativ unkompliziert. Setze zunächst den list-style auf none, um die Standardaufzählungszeichen zu entfernen. Anschließend kannst du mit Padding und einer ::before-Pseudo-Klasse eigene Designs erstellen. Von hier aus gibt es viele Möglichkeiten, das Design weiter anzupassen – sei es durch Änderungen am content oder durch den Einsatz von clip-path anstelle von border-radius.

ul.wp-block-list {
     list-style: none;

     li {
         position: relative;
         padding-left: 1.5rem;

         &::before {
             content: "";
             position: absolute;
             top: 0.45em;
             left: -0.45em;
             width: 0.75em;
             height: 0.75em;
             background-color: var(--wp--preset--color--accent);
             border-radius: 50%;
        }
    }
}Code-Sprache: SCSS (scss)

Geordnete Listen

Für geordnete Listen (<ol>) geht diese Strategie auf den ersten Blick nicht auf, weil die ::before-Pseudo-Klasse bei jedem Listenpunkt einen anderen content benötigt – z.B. die entsprechende Zahl. Der Trick heißt CSS Counter.

ol.wp-block-list {
     list-style: none;

     li {
         position: relative;
         padding-left: 1.5rem;
         counter-increment: list-counter;

         &::before {
             content: counter(list-counter, decimal) ". ";
             position: absolute;
             top: 0;
             left: 0;
             color: var(--wp--preset--color--accent);
             font-weight: bold;
        }
    }
}Code-Sprache: SCSS (scss)

Statt decimal kannst du auch alphabetic nutzen.

Außerdem kannst du den Counter auch in einem String nutzen, wie z.B. hier:

ol.wp-block-list {
     li {
         &::before {
           content: "Section " counter(list-counter) ": ";
        }
    }
}Code-Sprache: SCSS (scss)

Inhalt