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);
  }
}