Wie kann ich -Überschriften automatisch nummerieren lassen?
- Wie kann man <h4>-Überschriften automatisch nummerieren?
- Nummerierung mit reinem CSS
- Beispiel für CSS-Counter
- Alternative: Nummerierung mit JavaScript
- Zusammenfassung
Wie kann man <h4>-Überschriften automatisch nummerieren?
Nummerierung mit reinem CSS
Eine einfache Möglichkeit, <h4>-Überschriften automatisch zu nummerieren, ist die Verwendung von CSS-Countern. Mit CSS kannst du einen Zähler festlegen, der bei jeder <h4>-Überschrift inkrementiert wird und vor dem Text angezeigt wird.
Beispiel für CSS-Counter
Du musst zunächst einen Zähler im übergeordneten Element setzen, meist im body, mit counter-reset. Jede <h4> erhöht dann diesen Zähler mit counter-increment. Die Zahl wird mittels ::before-Pseudo-Element vor den Überschriftentext gesetzt.
Hier wird der Zähler h4counter im body zurückgesetzt:
body { counter-reset: h4counter;}Jede <h4> erhält den Befehl, den Zähler zu erhöhen:
h4 { counter-increment: h4counter; position: relative;}Mit ::before wird die Nummer sichtbar gemacht:
h4::before { content: counter(h4counter) ". "; position: absolute; left: -2em; font-weight: bold;}Alternative: Nummerierung mit JavaScript
Wenn du eine komplexere Struktur oder verschachtelte Nummerierungen möchtest, kannst du auch JavaScript einsetzen, um alle <h4> Überschriften zu durchlaufen und ihnen automatisch nummerierte Präfixe zu geben.
Ein Einfaches Beispiel:
document.querySelectorAll(h4).forEach((el, index) => { el.textContent = (index + 1) + ". " + el.textContent;});Zusammenfassung
Für einfache automatische Nummerierungen von <h4>-Überschriften ist der CSS-Counter-Ansatz der eleganteste Weg. Er benötigt kein JavaScript, ist performant und wird vom Browser unterstützt. Wenn deine Anforderungen aber komplexe hierarchische Nummerierungen sind, kann JavaScript nötig werden.
Die Kombination aus counter-reset, counter-increment und content: counter() im CSS ermöglicht eine automatische Nummerierung aller <h4>-Überschriften ganz ohne manuelle Anpassungen.