css counter-reset: not working in firefox?

user_14841211 0
Viewed 704

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>
css-counter firefox css html
2 Answers

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.

user_1692310

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>

user_122138960
Related