CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Questions

What is Bootstrap CSS What is CSS used for How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language How to edit CSS in WordPress How to use google fonts in CSS How to create blinking text using CSS How to Set Space between the Flexbox Is CSS a Programming Language

Difference

Difference between HTML and CSS Grid Vs Flexbox in CSS Difference between CSS Grid and CSS Flexbox

Misc

Create a 3D text effect using HTML and CSS Hover condition for a:before and a:after in CSS Bem CSS Boder Types CSS Features of CSS Font Face CSS Image Overlay CSS B Tag CSS Carousel CSS CSS Arrow CSS Focus Flex Grow in CSS Bem CSS Features of CSS Font Face CSS

CSS Page-break-after Attribute

Page-break-after Attribute

As its name implies, the page-break-before property is applied to include page break after any element, at the time of printing a document. It adds the page break after any specified item at the time of printing a document. We do not apply this CSS attribute on the elements which are absolutely positioned (position: absolute;) or any empty <div> tag that can’t produce any box.

It illustrates that any page break can be permitted after the box of an element or not. The CSS properties like page-break-before, page-break-inside, page-break-after support us to specify the document’s behavior when printed.

Syntax:

page-break-after:  auto | always | left | right | avoid | initial | inherit;  

A brief explanation of these property values in a tabular form is as follows:

Property Values

ValuesDescription
autoThis value is used as a default value. It adds the page break after any item if required.
alwaysIt forces the page break after any specified item always.
avoidThis property value avoids the page break after any item whenever possible.
leftA few page breaks are forced by the left value after any item so that the next page can be illustrated as the left side page.
rightA few page breaks are forced by the right value after any item so that the next page can be represented as the right side page.
initialThe initial value sets the page-break property to the default value.
inheritWhen this property value is described, the corresponding item applies its parent item page break after attribute computed value.

 Let’s take the above value’s example one by one.

Example: auto

This value is used as a default value. It includes the page break after any item automatically, if necessary. In the following example, we will use a button and two <div> components. The button will be responsible for page printing. We will examine the value effect after clicking over the button.

<!DOCTYPE html>
<html>
<head>
<style type= "text/css">
div
{
 font-size: 20px;
 page-break-after: auto;
}
</style>
</head>
<body>
<div>
<h2> Hello World! </h2>
<h2> Welcome to this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

 Output:       

CSS Page-break-after Attribute

Example: always

It forces to include the page break always. However, it is necessary or not. We will use the button for page printing. To examine the effect, we must click over the button.

<!DOCTYPE html>
<html>
<head>
<style type= "text/css">
div
{
 font-size: 20px;
 page-break-after: always;
}
</style>
</head>
<body>
<div>
<h2> Hello World! </h2>
<h2> Welcome to this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

Output:      

CSS Page-break-after Attribute

Example: left

The left value forces to include either one single or two-page breaks. Thus, the next-page formatting can be like the left side page.

<!DOCTYPE html>
<html>
<head>
<style type= "text/css">
div
{
 font-size: 20px;
 page-break-after: left;
}
</style>
</head>
<body>
<div>
<h2> Hello World! </h2>
<h2> Welcome to this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

Output:      

CSS Page-break-after Attribute

Example: right

The right value forces to include either one single or two page breaks, thus, the next-page formatting can be like the right side page.

<!DOCTYPE html>
<html>
<head>
<style type= "text/css">
div
{
 font-size: 20px;
 page-break-after: right;
}
</style>
</head>
<body>
<div>
<h2> Hello World! </h2>
<h2> Welcome to this Page. </h2>
</div>
<div>
This website is made for the students so that they can study various computer science concepts easily. This Website is devoted to give in-depth and easy tutorials on multiple technologies. Everyone can't be perfect in this entire world, and everything can't be best eternally. But we should try to be perfect.
</div>
<br>
<button onclick= "fun()">Print this page</button>
<script>
function fun()
{
 window.print();
}
</script>
</body>
</html>

Output:      

CSS Page-break-after Attribute