CSS Academy · Lektion

CSS-Zähler mit ::before

Erstellen Sie mit CSS-Zählern und der Funktion counter() automatische Nummerierungssysteme.

CSS-Zähler mit ::before ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind CSS-Zähler?

CSS-Zähler sind von CSS verwaltete Variablen, deren Werte erhöht und in generierten Inhalten angezeigt werden können. Sie ermöglichen eine automatische Nummerierung ohne JavaScript oder eine manuelle Verwaltung von Nummern im HTML.

counter-reset

counter-reset initialisiert einen Zähler oder setzt ihn zurück. Platzieren Sie die Eigenschaft auf dem Element, das die zu zählenden Elemente enthält.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment erhöht den Zähler bei jeder Anwendung standardmäßig um 1. Platzieren Sie die Eigenschaft auf den wiederholten Elementen.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Die Funktion counter() in content

Zeigen Sie den aktuellen Zählerwert an, indem Sie counter(name) in der content-Eigenschaft eines Pseudoelements verwenden.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Formatierter Schrittzähler

Eine vollständige Komponente für nummerierte Schritte ohne JavaScript:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

Anfangswert des Zählers

Legen Sie eine benutzerdefinierte Startnummer in counter-reset fest:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Zählerstile

Verwenden Sie ein zweites Argument von counter(), um den Stiltyp der Liste festzulegen:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Verschachtelte Zähler mit counters()

counters(name, separator) (mit einem „s“) erstellt eine verschachtelte Nummerierung wie „1.1“, „1.2“, „2.1“:

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

Zurücksetzen bei verschachtelten Listen

Jedes verschachtelte ol übernimmt den Gültigkeitsbereich des Zählers. Die Funktion counters() verwendet automatisch die vollständige Zählerkette.

Abschnittsnummerierung

Nummerieren Sie Überschriften in langen Dokumenten automatisch:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

Inhaltsverzeichnis mit Zählern

CSS-Zähler wurden früher häufig für Inhaltsverzeichnisse und formatierte Dokumente verwendet. Heute wird dies oft von JavaScript-Frameworks übernommen, CSS-Zähler bleiben jedoch eine reine CSS-Option.

Kurzer Test

Welche Eigenschaft erhöht einen CSS-Zähler bei jedem passenden Element?

Zusammenfassung

CSS-Zähler ermöglichen eine automatische Nummerierung ohne JavaScript. Verwenden Sie counter-reset auf dem Container, counter-increment auf wiederholten Elementen und zeigen Sie den Wert mit counter(name) in der content-Eigenschaft eines Pseudoelements an. counters() übernimmt die verschachtelte Nummerierung mit Trennzeichen.

Häufig gestellte Fragen

Ist die Lektion „CSS-Zähler mit ::before“ kostenlos?

Ja — der vollständige Text von „CSS-Zähler mit ::before“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „CSS-Zähler mit ::before“?

Erstellen Sie mit CSS-Zählern und der Funktion counter() automatische Nummerierungssysteme. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „CSS-Zähler mit ::before“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy