css counter-reset: not working in firefox?
Question
Has the Firefox desktop v84 update broken the CSS counter-reset: functionality? Chrome and Edge render ok but not Firefox Can anybody confirm?
Below is a sample of the code that I'm using:
<html>
<head>
<style type="text/css">
body
{
counter-reset: section subsection;
}
p.section
{
counter-reset: subsection;
}
p.section:before
{
counter-increment: section;
content: "" counter(section) ".0" ": ";
counter-reset: subsection;
}
p.subsection:before
{
counter-increment: subsection;
content: "" counter(section) "." counter(subsection) ": ";
}
</style>
</head>
<body>
<p class="section">Paragraph should be 1.0</p>
<p class="section">Paragraph should be 2.0</p>
<p class="subsection">Paragraph should be 2.1</p>
<p class="subsection">Paragraph should be 2.2</p>
<p class="section">Paragraph should be 3.0</p>
<p class="section">Paragraph should be 4.0</p>
<p class="subsection">Paragraph should be 4.1</p>
</body>
</html>
2 answers
solution1
1 2020-12-28 20:41:59
Ouroborus's comment on your question is the key: use counter-set on your body style to create the counters, and continue to use counter-reset on other elements to reset them. I had the same problem with Firefox, and switching to counter-set on the body style fixed it.
This seems to be a recent Firefox change: previously, the counters seemed to be implicitly created, and now it seems that creation has to be done explicitly.
solution2
0 2020-12-17 07:53:51
Can you please check the below code? Hope it will work for you. No need to reset the subsection in the body , because we need to reset the counter after every section . so we have kept the counter reset subsection in the section as it is.
Please refer to this link https://jsfiddle.net/yudizsolutions/baqnzf39/6/
<html> <head> <style type="text/css"> body { counter-reset: section; } p.section { counter-reset: subsection; } p.section:before { counter-increment: section; content: ""counter(section) ".0"": "; counter-reset: subsection; } p.subsection:before { counter-increment: subsection; content: ""counter(section) "."counter(subsection) ": "; } </style> </head> <body> <p class="section">Paragraph should be 1.0</p> <p class="section">Paragraph should be 2.0</p> <p class="subsection">Paragraph should be 2.1</p> <p class="subsection">Paragraph should be 2.2</p> <p class="section">Paragraph should be 3.0</p> <p class="section">Paragraph should be 4.0</p> <p class="subsection">Paragraph should be 4.1</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.