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.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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.