Automatische Nummerierung mit CSS

In diesem Beitrag möchte ich aufzeigen, wie ich die automatische Nummerierung von Abschnitten mittels Cascading Style Sheets umsetze. Ich formatiere und strukturiere meine Beiträge mit Überschriften der Ebene 3, Ebene 4 und Paragraphen. Die Nummerierung soll aber lediglich innerhalb bestimmter Abschnitte aktiviert sein, weswegen ich ein <div> als Container definiere.

Cascading Style Sheets (CSS)

.mkrEbeneStart{
	counter-reset: ebene1;
}
.mkrEbeneStart h3{
	counter-reset: ebene2;
}
.mkrEbeneStart h4{
	counter-reset: ebene3;
}
.mkrEbeneStart h3:before{
	content: counter(ebene1) " ";
    counter-increment: ebene1;
}
.mkrEbeneStart h4:before{
    content: counter(ebene1) "." counter(ebene2) " ";
    counter-increment: ebene2;
}

Hypertext Markup Language (HTML)

Wie sahen die Überschriften vorher aus?

<h3>Ebene 1</h3> 
<h4>Ebene 2</h4>

Ebene 1

Ebene 2

Wie sehen die Überschriften jetzt aus?

<div class="mkrEbeneStart">
	<h3>Ebene 1</h3>
	<h4>Ebene 2</h4>
</div>

Ebene 1

Ebene 2