CSS page-break-after Property

The CSS page-break-after property controls whether a page break is forced or avoided after a given element when the document is printed or displayed in any paged-media context (printing, PDF export, print preview). A page break ends the current page and pushes the following content onto a new page.

On a normal screen, web content flows in one continuous scroll, so there is nothing to break. But when that same page is sent to a printer or saved as a PDF, the browser has to decide where one sheet of paper ends and the next begins. page-break-after lets you influence those decisions — for example, to start every new chapter at the top of a fresh page, or to keep a heading from being stranded at the bottom of one.

The property has no visible effect on screen; you typically place it inside an @media print block so the rules apply only when the document is printed. It does not apply to absolutely positioned elements.

Syntax

page-break-after: auto | avoid | always | left | right | initial | inherit;

Example: start each section on a new page

A common use is forcing every top-level section to begin on its own printed page. Apply page-break-after: always to each section so a break is inserted after it:

@media print {
  .chapter {
    page-break-after: always;
  }
}

<div class="chapter">
  <h2>Chapter 1</h2>
  <p>...content...</p>
</div>
<div class="chapter">
  <h2>Chapter 2</h2>
  <p>...content...</p>
</div>

When printed, Chapter 2 now starts at the top of page 2.

Example: keeping an element from breaking after it

Use avoid to discourage a break right after an element — for instance, to stop a heading from sitting alone at the bottom of a page, separated from the text that follows it:

@media print {
  h2 {
    page-break-after: avoid;
  }
}

Tip: pair with page-break-before and page-break-inside

page-break-after is one of three related properties. Use them together for full control over printed layouts:

• page-break-before — controls breaks before an element.
• page-break-inside — prevents an element (a table or figure) from being split across two pages.

Values

The left and right values are mainly useful for double-sided printing, where you want a section to begin on a specific side of the spread.

Note: For modern web development, use the break-after property instead, as page-break-after is deprecated.

Practice