CSS Recipes

Page breaks

To break a page anywhere, use a div with page-break-before:always:

p Some paragraph

div(style="page-break-before:always")

p Some other paragraph

Numbered headings

If you want your headings automatically numbered by CSS, you can use the approach described in this Phil Archer blog post. The following example numbers headings 2 and 3, but doesn't number h1 tags or anything with the class .nocount.

In your styles.scss,

body {counter-reset: h2}
h2 {counter-reset: h3}

h2:before {
  counter-increment: h2;
  content: counter(h2) ". "
}

h3:before {
  counter-increment: h3;
  content: counter(h2) "." counter(h3) ". "
}

h2.nocount:before, h3.nocount:before {
  content: "";
  counter-increment: none;
}