Skip to content
Related Articles

Related Articles

How to insert a page break after each footer element in CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 26 May, 2021

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.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!