How to reset css page counter

Question

I am trying to reset the page counter based on when a new section starts. Here is the HTML

<div id="page">Page </div>
<div class="title">Title</div>
Content
<div class="title">Title</div>
Content
<div class="title">Title</div>
Content

And CSS

.page{
  position:fixed;
  top:0;
  right:0;
}
#page:after{
  counter-increment:page;
  content:counter(page);
}
.title{
  counter-resest:page;
}

If there is no counter-reset the pages are numbered normally, but if I have a counter-reset the first page gets numbered and then for the rest of the pages the number is blank.

Answer 1

See the following counter if it may help you.

 body { counter-reset: section; /* Set the section counter to 0 */ } h3::before { counter-increment: section; /* Increment the section counter*/ content: "Section" counter(section) ": "; /* Display the counter */ } ol { counter-reset: nested-section; /* Creates a new instance of the section counter with each ol element */ list-style-type: none; } li::before { counter-increment: nested-section; /* Increments only this instance of the section counter */ content: counters(nested-section,".") " "; /* Adds the value of all instances of the section counter separated by a ".". */ /* if you need to support < IE8 then make sure there is no space after the ',' */ } 

 <h1>Counters</h1> <h3>Introduction</h3> <h3>Body</h3> <h3>Conclusion</h3> <h1>Nesting counters</h1> <ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-- 2.3 --> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> </ol> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol> 

You can read more here: Using CSS counters