Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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. 


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


<!DOCTYPE html>
    <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;
    <h2>Welcome To GFG</h2>
        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.
    <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.


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
Similar Reads
Complete Tutorials