Page counter-reset not working

[Mohamad Hasan]

Hi all,

I have a PDF document and it's content is divided into sections. The page numbering is done by: 

@page {

     @bottom-right {

           content: "Page " counter(page);

      }

}

What I want is to reset the page counter to 1 whenever a section finishes and another one starts. To do this, I added a class to the first div of each section called "reset-counter", and used the following css:

@page {

              .reset-counter {

                  counter-reset: page;

                }

              counter-increment: page;

            

              @bottom-right {

                  content: "Page " counter(page);

              }

} 

However, this didn't work and the counter is being incremented normally. Any idea how could I solve this?

Thanks in advance.