html - How to reset css page counter -
i trying reset page counter based on when new section starts. here 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 no counter-reset pages numbered normally, if have counter-reset first page gets numbered , rest of pages number blank.
see following counter if may you.
body { counter-reset: section; /* set section counter 0 */ } h3::before { counter-increment: section; /* increment section counter*/ content: "section" counter(section) ": "; /* display counter */ } ol { counter-reset: nested-section; /* creates new instance of section counter each ol element */ list-style-type: none; } li::before { counter-increment: nested-section; /* increments instance of section counter */ content: counters(nested-section,".") " "; /* adds value of instances of section counter separated ".". */ /* if need support < ie8 make sure there no space after ',' */ }
<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
Comments
Post a Comment