We are creating reports of variable length, and are trying to add the page number to each printed page. However, counter doesn’t increment, and we can’t figure it out.

<div class="pageCount"></div>

This is the element to hold the page number.

@media screen {
    div.pageCount{
        display: none;
    }
}
@media print{
    div.pageCount{
        position: fixed;
        top: 0;
        right: 0;
    }
    div.pageCount:before{
        content: "Page " counter(page);
    }
}

This is the CSS to show the pageCount element on print and add page numbers. But every page says “Page 1”, so the counter doesn’t increment.

Is there a way to increment on page break or something similar to achieve what we are after?

Any help will be appreciated.