Automatische Überschriftennummerierung

automatische-uberschriftennummerierung.markdown

Automatische Überschriftennummerierung

A Pen by Jens Grochtdreis on CodePen.

License.

index.html

<main>
  <h1>Überschrift ersten Grades</h1>
  <h2>Überschrift zweiten Grades</h2>
  <h3>Überschrift dritten Grades</h3>
  <h3>Überschrift dritten Grades</h3>
  <h4>Überschrift vierten Grades</h4>
  <h4>Überschrift vierten Grades</h4>
  <h3>Überschrift dritten Grades</h3>
  <h2>Überschrift zweiten Grades</h2>
  <h3>Überschrift dritten Grades</h3>
  <h2>Überschrift zweiten Grades</h2>
  
  <h1>Hier kommt noch eine Überschrift erster Ordnung!</h1>
  <h2>Überschrift zweiten Grades</h2>
  <h3>Überschrift dritten Grades</h3>
  <h3>Überschrift dritten Grades</h3>
  <h4>Überschrift vierten Grades</h4>
  <h4>Überschrift vierten Grades</h4>
  <h3>Überschrift dritten Grades</h3>
  <h2>Überschrift zweiten Grades</h2>
  <h3>Überschrift dritten Grades</h3>
  <h2>Überschrift zweiten Grades</h2>
  
</main>

style.css

main {
  counter-reset: headlines-1;
}


h1 {
  counter-increment: headlines-1;
  counter-reset: headlines-2;
}
h1:before {
  content: counter(headlines-1) ". "
}

h2 {
  counter-increment: headlines-2;
  counter-reset: headlines-3;  
}
h2:before {
  content: counter(headlines-1) "." counter(headlines-2) ". ";
}

h3 {
  counter-increment: headlines-3;
  counter-reset: headlines-4;
}
h3:before {
  content: counter(headlines-1) "." counter(headlines-2) "." counter(headlines-3) ". ";
}

h4 {
  counter-increment: headlines-4;
}
h4:before {
  content: counter(headlines-1) "." counter(headlines-2) "." counter(headlines-3) "." counter(headlines-4) ". "
}


h1 {
  color: #5fa9c4;
}

h2 {
  color: #a20000;
  margin-left: 10px;
}

h3 {
  color: #345f6f;
  margin-left: 20px;
}
h4 {
  color: #333333;
  margin-left: 30px;
}


h1:not(:first-of-type) {
  margin-top: 40px;
}

styles

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5028/basics_3.css" rel="stylesheet" />