CSS page-break-after Property

Definition and Usage

The page-break-after property adjusts page breaks after the current element in print and other paged media. It applies to block-level elements that generate a box.

It is not inherited. The initial value is auto. Pair it with page-break-before and page-break-inside for older print stylesheets.

CSS Syntax

Some engines also recognize recto and verso. Start with auto, always, and avoid.

Property Values

How to Use page-break-after

Use it only for print styles you maintain, or migrate the rule to break-after.

1. Pick the block that should end a printed page (often a heading or section end).
2. Set page-break-after: always to force the next content onto a new page.
3. Check the result in Print Preview (Ctrl+P / Cmd+P).
4. For new CSS, rewrite as break-after: page.

Live Preview

Screen layout cannot show real print pages. This demo simulates a forced break after the marked block when you choose always, left, or right.

CSS Examples

Each snippet focuses on page-break-after. Confirm with Print Preview. Use Try It Yourself for a live editor.

<style>
  h1 {
    page-break-after: always;
  }
</style>

<h1>Chapter 1</h1>
<p>Ends this printed page.</p>
<h1>Chapter 2</h1>

<style>
  h2 {
    page-break-after: avoid;
  }
</style>

<h2>Heading</h2>
<p>Keep this with the heading when possible.</p>

<style>
  p {
    page-break-after: auto;
  }
</style>

<p>Break only if the page needs one.</p>

Key Takeaways