CSS Zähler

body {
  counter-reset: abschnitt;
}

h2 {
  counter-increment: abschnitt;
}

h2::before {
  content: counter(abschnitt) ". ";
  color: #3b82f6;
}

<div class="section-demo">
<h3>Einleitung</h3>
<p>Hier steht der einleitende Text zum Thema.</p>
<h3>Grundlagen</h3>
<p>Die Grundlagen werden in diesem Abschnitt erklärt.</p>
<h3>Fortgeschritten</h3>
<p>Weiterführende Konzepte und Techniken.</p>
<h3>Zusammenfassung</h3>
<p>Ein kurzes Fazit am Ende.</p>
</div>

.list {
  counter-reset: item;
}

.list-item {
  counter-increment: item;
}

.list-item::before {
  content: counter(item);
  background: #3b82f6;
  color: #fff;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="custom-list">
<div class="item"><div class="item-text"><strong>HTML-Grundgerüst erstellen</strong><br/>Erstelle die index.html mit Doctype und Grundstruktur.</div></div>
<div class="item"><div class="item-text"><strong>CSS einbinden</strong><br/>Verlinke dein Stylesheet im head-Bereich.</div></div>
<div class="item"><div class="item-text"><strong>Inhalt strukturieren</strong><br/>Verwende semantische Elemente wie header, main und footer.</div></div>
<div class="item"><div class="item-text"><strong>Styling anwenden</strong><br/>Gestalte Layout, Farben und Typografie mit CSS.</div></div>
</div>

ol {
  counter-reset: nested;
  list-style: none;
}

li {
  counter-increment: nested;
}

li::before {
  content: counters(nested, ".") " ";
  color: #3b82f6;
  font-weight: 700;
}

<div class="nested-demo">
<ol>
  <li>Einleitung
    <ol>
      <li>Motivation</li>
      <li>Zielgruppe</li>
    </ol>
  </li>
  <li>Grundlagen
    <ol>
      <li>HTML
        <ol>
          <li>Elemente</li>
          <li>Attribute</li>
        </ol>
      </li>
      <li>CSS
        <ol>
          <li>Selektoren</li>
          <li>Box-Modell</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Fortgeschritten
    <ol>
      <li>Flexbox</li>
      <li>Grid</li>
    </ol>
  </li>
</ol>
</div>

/* Römische Zahlen */
li::before { content: counter(c, upper-roman) ". "; }

/* Kleinbuchstaben */
li::before { content: counter(c, lower-alpha) ") "; }

/* Führende Null */
li::before { content: counter(c, decimal-leading-zero) " "; }

<div class="style-demo">
<div>
  <h4>upper-roman</h4>
  <ol class="st-roman"><li>Erster</li><li>Zweiter</li><li>Dritter</li><li>Vierter</li></ol>
</div>
<div>
  <h4>lower-alpha</h4>
  <ol class="st-alpha"><li>Erster</li><li>Zweiter</li><li>Dritter</li><li>Vierter</li></ol>
</div>
<div>
  <h4>decimal-leading-zero</h4>
  <ol class="st-leading"><li>Erster</li><li>Zweiter</li><li>Dritter</li><li>Vierter</li></ol>
</div>
</div>

.tutorial {
  counter-reset: step;
}

.step {
  counter-increment: step;
}

.step::before {
  content: counter(step);
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="steps-demo">
<div class="step">
  <div class="step-content">
    <h4>Repository klonen</h4>
    <p>Klone das Projekt mit git clone auf deinen Rechner.</p>
  </div>
</div>
<div class="step">
  <div class="step-content">
    <h4>Dependencies installieren</h4>
    <p>Führe npm install im Projektverzeichnis aus.</p>
  </div>
</div>
<div class="step">
  <div class="step-content">
    <h4>Entwicklungsserver starten</h4>
    <p>Mit npm run dev startest du den lokalen Server.</p>
  </div>
</div>
<div class="step">
  <div class="step-content">
    <h4>Loslegen</h4>
    <p>Öffne localhost:4321 im Browser und beginne mit der Entwicklung.</p>
  </div>
</div>
</div>