Utilizing css counters for the formatting of certain wiki pages is a common practice that I implement by adding CSS directly to the wiki page. One particular use case involves numbering headers using counters.
Below is a snippet of the code that demonstrates this functionality:
https://i.sstatic.net/xj95t.png
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
body {
counter-reset: h1counter;
}
#main-content h1 {
width: 100%;
background-color: #D1DEF1;
counter-reset: h2counter;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
}
#main-content h1:before {
content: counter(h1counter) ".\0000a0\0000a0";
counter-increment: h1counter;
}
#main-content h2 {
width: 100%;
background-color: #D1DEF1;
counter-reset: h3counter;
border-top: 1px dotted #000;
border-bottom: 1px dotted #000;
}
#main-content h2:before {
content: counter(h1counter) "." counter(h2counter) ".\0000a0\0000a0";
counter-increment: h2counter;
}
</style>
<body>
<div id="main-content">
<h1>one</h1>
<h2>one.one</h2>
<h2>one.two</h2>
</div>
</body>
</html>
However, when incorporating additional formatting features from the wiki's page layout, the html structure may be altered as shown below (simplified):
<body>
<div id="main-content">
<div class="hzlayout">
<h1>one</h1>
<h2>one.one</h2>
</div>
<div class="hzlayout">
<h2>one.two</h2>
</div>
</div>
</body>
This restructuring leads to an issue where the numbering format gets disrupted:
https://i.sstatic.net/LyVtL.png
The reset of the h2counter occurring outside of the .hzlayout div or upon entering the second .hzlayout div remains puzzling to me. Any assistance on resolving this matter would be greatly appreciated.
Thank you in advance for any guidance provided.