Syntax

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.

Overview

ClassDeclarations
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.

Briefs

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.


Animals

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">
<h3>Briefs</h3>
<p>A content brief is a document …</p>
<hr class="break-after:column" />
<h3>Animals</h3>
<p>There are a wide variety of animals in the world …</p>
</div>

Conditionally apply

Apply styles based on different states using selectors and conditional queries.

<div class="break-after:auto:hover break-after:auto@sm break-after:auto@dark break-after:auto@print"></div>
Syntax
Box Sizing

Setting how the total width and height of an element is calculated.

Syntax
Break Before

Controlling how page, column, or region breaks should occur before the specified element.

© Aoyue Design LLC.