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.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
26 May, 2021
Like Article
Save Article