Skip to content
Related Articles

Related Articles

Improve Article

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

  • 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.

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :