Überschriftennummerierung mit CSS-counter

Genauere Infos gibt es bei Vladimir Simovic: Näheres: http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

by bitstarr

HTML

<h1>Buchtitel</h1>
<h2>Kapitel</h2>
<h3>Abschnitt</h3>
<h3>Abschnitt</h3>
<h2>Kapitel</h2>

CSS

body {counter-reset: ebene1;}

h1:before {
    content: counter(ebene1) " ";
    counter-increment: ebene1;}
h1 {counter-reset: ebene2;}

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

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

body { padding: 40px;}
h1, h2, h3 { margin: 0 0 10px 0; border-bottom: 1px dotted #666;}
h2 {margin-left: 10px;}
h3 {margin-left: 20px;}

JavaScript

// Näheres: http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

// funktioniert in allen richtigen Browsern und im IE ab Version 8.