CSS page-break-after

The page-break-after property in CSS is used to specify whether a page break should occur after a specified element. This can be useful when creating print-friendly versions of web pages or when dealing with multiple page layouts.

The page-break-after property can have the following values:

auto: Default value. Automatic page breaks are inserted after the element, if necessary.
always: Page break always occurs after the element.
avoid: Avoids page break after the element if possible.
left: Page break occurs after the element on the next left-hand page.
right: Page break occurs after the element on the next right-hand page.

Let's see an example of how to use the page-break-after property in CSS:

Result:


    <style>
      .page-break {
        page-break-after: always;
      }
    </style>
    
    <div class="page-break">
      This content will always appear on a new page.
    </div>

This content will always appear on a new page.

In this example, we have a div element with a class of page-break that has the page-break-after: always; CSS property applied to it. This ensures that the content within the div will always appear on a new page when printed.