CSS break-after property

Last Updated : 08 Jun, 2023

The break-after property allows you to place a break on multi-region contexts, paged media, and multi-column layouts. This property describes how the region, column, or page break behaves after the generated box. This property is ignored if there is no generated box at all.

Syntax:

break-after: Generic break values;
/* Or */
break-after: Page break values;
/* Or */
break-after: Column break values;
/* Or */
break-after: Region break values;
/* Or */
break-after: Global values;

Default Value : Its default value is auto.

Property values: This property accepts the property values mentioned above and described below:

Generic break values: This property refers to the values defined by auto, avoid, always, all, etc.
Page break values: This property refers to the values defined by page, avoid-page, left, right, recto, verso, etc.
Column break values: This property refers to the values defined by column, avoid-column, etc.
Region break values: This property refers to the values defined by region, avoid-region, etc.
Global values: This property refers to the values defined by inherit, initial, unset, etc.

Example: Below is the example which illustrates the use of break-after property

html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .Container {
            column-count: 3;
            column-rule: 2px dotted olivedrab;
        }
 
        .Container hr {
            break-after: column;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align: center; color: green;">
        GeeksforGeeks
    </h1>
 
    <div class="Container">
        <h2>geek 1</h2>
 
 
        <p>
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science portal 1
            Computer Science
            portal 1
        </p>
        <hr />
 
        <h2>geek 2</h2>
        <p>
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science portal 2
            Computer Science
            portal 2
        </p>
 
    </div>
</body>
</html>