Page Widget How to - Add index to header in CSS

Question

We would like to know how to add index to header in CSS.

Answer


<html>
<head>
<style>
body {<!--from  www. j a v a2  s.  com-->
  counter-reset: chapter;
  counter-reset: section;
}

h1:before {
  content: "Chapter " counter(chapter) ": ";
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2:before {
  content: counter(chapter) "." counter(section) " ";
}

h2 {
  counter-increment: section;
}
</style>
</head>

<body>
  <h1>Web Technologies</h1>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>XHTML</h2>
  <h1>Structure of Documents</h1>
  <h2>Text</h2>
  <h2>Lists</h2>
  <h2>Tables</h2>
  <h2>Forms</h2>
</body>
</html>

The code above is rendered as follows: