CSS is used for designing a webpage to make it more beautiful and attractive for the users.
After inserting a page break after each footer, it will look better and also avoids repetition by using CSS page-break-after property.
Syntax:
.foot {
page-break-after: always;
}Page-break-after provides a lot more property values:
- page-break-after: auto;
- page-break-after: always;
- page-break-after: avoid;
- page-break-after: left;
- page-break-after: right;
- page-break-after: recto;
Example: To insert a page break after each and every footer or a specified element, we use the property page-break-after: always;
HTML
<!DOCTYPE html> <html>
<head>
<style type="text/css">
.footer {
margin: 10px 0 0 0;
padding: 10px 0;
border-bottom: 1px dotted Black;
page-break-after: always;
}
body {
font-size: 1rem;
width: 40%;
margin: auto;
font-family: cormorant infant;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>
GeeksforGeeks is my favorite site where
I can gain a lot of knowledge and can
also share my knowledge what I have
gained while learning. We can add more
paragraphs for content. This is just an
example to tell how to create a story
book like effect. More paragraphs,
content just for showing its best effect.
Some more paragraphs needed. Just some
more. Now you can see it.
</p>
<div class="footer">
This article tells about how to insert a
page break after every footer using CSS.
We can add more paragraphs as required.
</div>
</body>
</html>
|
Output:
We have Inserted a Page break after each footer, which will attract readers to read the contents on the webpage.