How to use CSS counter increment for dynamic page numbers
So I was never able to get this to work for my case. I know other cases may work with above answers, but I could not get the Front-End alone to generate the dynamic page numbers.
I used help from my back-end, which is PHP in my case and used a plugin called wkhtmltopdf.
This solved my issue, https://stackoverflow.com/a/13496899/6000966.
I was able to remove the logic from the front-end and place it on the back-end and let it handle the dynamic page numbers.
I would advise if the HTML pages are using dynamic data from the back-end, something like this is the way to go.
Static pages on the other hand should work with the above answers.
I found that code in one Russian article. That code adds pagination to each page:
@page:right{
@bottom-right {
content: counter(page);
}
}
@page:left{
@bottom-left {
content: counter(page);
}
}
And code below can show number of page of their total like "Page 3 of 120".
@page:left{
@bottom-left {
content: "Page " counter(page) " of " counter(pages);
}
}