Use the counter-increment, counter-reset, and content properties to automatically assign a series of numbers to chapter and section elements.

Use the counter name as the value of the counter-increment and counter-reset properties. Specifying a counter name for the content property allows the value of the counter to be inserted in the ::before or ::after pseudo-elements. The counter’s value increases each time an element applies counter-increment and resets when counter-reset is applied.

body {
  counter-reset: ChapterNo;          /* reset chapter number counter */
}
h1:before {
  counter-increment: ChapterNo;      /* add 1 to chapter number counter */
  /* Insert 'Chapter n' before chapter header  (h1)  */
  content: "Chapter" counter(ChapterNo) ":　";
}
h1 { /* set h1:before and Chapter of h1 */
  string-set: Chapter content(before) content();
  counter-reset: SectionNo;          /* reset section number counter */
}
h2:before {
  counter-increment: SectionNo;      /* add 1 to section counter */
  content: counter(ChapterNo) "." counter(SectionNo) " ";
}
h2 { /* set h2:before and Section of h2 */
  string-set: Section content(before) content();
}
@page :left {
  @top-left { /* insert section title in the running head on the left page */
    content: string(Chapter);
  }
}
@page :right {
  @top-right { /* insert section title in the running head on the right page */
    content: string(Section);
  }
}