Error displaying page number. Convert from HTML to PDF

Question

It is my target:

My counter must be in block. I can't use @bottom-right

I have:

I found this issues:

@page {
        counter-increment: page
    }

.page-counter {
    width: 50%;
    float: left;
    text-align: left;
    height: 32px;
    font-weight: normal;
}

.page-counter::after{
    content: "Page " counter(page) " of " counter(pages);
}

<div class="page-counter"></div>

Where is my mistake? Thank you in advance.

I tried :

@page {
   .page-counter{
    content: counter(page) " of " counter(pages);
   }
}

but it doesn't work