Break After

Controlling how page, column, or region breaks should occur after an element.

🚧This page is still under construction and some content may not be complete.


break-after:valuebreak-after: value;
break-after:autobreak-after: auto;
break-after:avoidbreak-after: avoid;
break-after:avoid-columnbreak-after: avoid-column;
break-after:avoid-pagebreak-after: avoid-page;
break-after:columnbreak-after: column;
break-after:leftbreak-after: left;
break-after:pagebreak-after: page;
break-after:rectobreak-after: recto;
break-after:revertbreak-after: revert;
break-after:rightbreak-after: right;
break-after:versobreak-after: verso;

Basic usage

Set the break after behavior

Use break-after:value to set how breaks should behave after a generated box.


A content brief is a document that outlines the key details of a piece of content. It should include an overview of the project, a well as any specific instructions or requirements.


There are a wide variety of animals in the world, and each one has its own unique set of characteristics and habits.

<div class="cols:2">
<p>A content brief is a document …</p>
<hr class="break-after:column" />
<p>There are a wide variety of animals in the world …</p>

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="break-after:auto:hover break-after:auto@sm break-after:auto@dark break-after:auto@print"></div>
Design Token

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.