CSS page-break-after Property

The page-break-after property defines page break after the element.

This property cannot be used on an empty <div> or on absolutely positioned elements.

The page-break-after property is replaced by the break-after property.

Browsers should treat the page-break-after property as an alias of break-after. This assures that sites using the page-break-after property still work as designed.

Initial Value auto
Applies to Block-level elements.
Inherited No.
Animatable No.
Version CSS2
DOM Syntax object.style.pageBreakAfter = "avoid";

Syntax

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

You can insert the following piece of code with page-break-after in your CSS code:

@media print {
  footer {
    page-break-after: left;
  }
}

Values

Value Description
auto Allows to insert any page break after the element.
avoid Avoids to insert any page break after the element.
always Forces to insert any page break after the element.
left Insert a page break after the element so that the next page is formatted as a left page.
right Insert a page break after the element so that the next page is formatted as a right page.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Browser support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.2+ 7.0+

Practice Your Knowledge

What does the 'page-break-after' property do in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?