Numbering headlines with CSS-counter

For more details see the German article of Vladimir Simovic: http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

HTML

<h1>Introduction (level 1)</h1>

<p>girl black cat.</p>

<h2>Swamp thing (level 2)</h2>

<p>omniscient.</p>

<h3>Spidey (level 3)</h3>

<p>Red arrow aquababy, hellstorm black cat valerie hart mephisto spider-girl.</p>

<h3>Many more (level 3)</h3>

<p>Hal j dawson.</p>

<h2>Spawn</h2>

<p>Spawn, barda.</p>

<h1>Introduction 2nd (level 1)</h1>

<p>girl black cat.</p>

<h5>Many more (level 5)</h5>

<p>Hal j dawson.</p>

<h2>Swamp thing 2nd (level 2)</h2>

<p>omniscient.</p>

<h3>Spidey 2nd (level 3)</h3>

<p>omniscient.</p>
<p>omniscient.</p>
<p>omniscient.</p>

<h2>Swamp thing 2nd (level 2)</h2>

<p>omniscient.</p>
<p>omniscient.</p>

<h2>Swamp thing 2nd (level 2)</h2>

<p>omniscient.</p>

<h3>Many more (level 3)</h3>

<p>Hal j dawson.</p>

<h4>Many more (level 4)</h4>

<p>Hal j dawson.</p>

<h4>Many more (level 4)</h4>

<p>Hal j dawson.</p>

<h4>Many more (level 4)</h4>

<p>Hal j dawson.</p>

<h5>Many more (level 5)</h5>

<p>Hal j dawson.</p>

CSS

body {
    counter-reset: level1;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
h1:before {
    content: counters(level1, "|")" [" counters(level2, "|")"." counters(level3, "|")"." counters(level4, "|")"." counters(level5, "|")"." counters(level6, "|")"] ";
    counter-increment: level1;
}
h1 {
    counter-reset: levelText;
}
h2:before {
    content: counters(level1, "|")"." counters(level2, "|")" [" counters(level3, "|")"." counters(level4, "|")"." counters(level5, "|")"." counters(level6, "|")"] ";
    counter-increment: level2;
}
h2 {
    counter-reset: level3;
}
h3:before {
    content: counters(level1, "|")"." counters(level2, "|")"." counters(level3, "|")" [" counters(level4, "|")"." counters(level5, "|")"." counters(level6, "|")"] ";
    counter-increment: level3;
}
h3 {
    counter-reset: level4;
}
h4:before {
    content: counters(level1, "|")"." counters(level2, "|")"." counters(level3, "|")"." counters(level4, "|")" [" counters(level5, "|")"." counters(level6, "|")"] ";
    counter-increment: level4;
}
h4 {
    counter-reset: level5;
}
h5:before {
    content: counters(level1, "|")"." counters(level2, "|")"." counters(level3, "|")"." counters(level4, "|")"." counters(level5, "|")" [" counters(level6, "|")"] ";
    counter-increment: level5;
}
p:before {
    content: counters(level1, "|")"-" counters(levelText, "|")" ";
    counter-increment: levelText;
}
body {
    padding: 40px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
}
h1 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #a20000;
}
h2, h3 {
    margin: 10px 0;
}
h2 {
    font-size: 12px;
    color: maroon;
}
h3 {
    font-size: 12px;
}

JavaScript

// For more details see the German article of Vladimir Simovic:
//http://www.perun.net/2011/12/07/css-automatische-nummerierung-von-ueberschriften/

// works in all real browsers and in IE starting with version 8

// text by http://comicipsum.com/