How to print page number using css

Question

I want to print page number in each page when printing.

I want to acheive this with turn off browser print preview settings.

Here is my code.

.rptFooter {
    counter-reset: footerNum;
}

.rptFooter:after {
    counter-increment: footerNum;
    content: "Page " counter(footerNum) " of " counter(footerNum) ;
}   

i am getting in each page

Page 1 of 1

Answer 1

Try using the default base:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

As seen here:

Browser Support for CSS Page Numbers