How to insert a page break after each footer element in CSS ?
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.
Last Updated :
26 May, 2021
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...