Css counters difference in output for marker and before pseudo elements

Question

I am going through this link to understand more on counters and how nested counter work,

I have the css and html as following

<style>
   ol {
      counter-reset: my-counter 0;
      list-style-type: none;
   }
   li::before {
     content: counters(my-counter, '.'); 
     counter-increment: my-counter;
   }
</style>

With the html as

<ol>
  <li> First
     <ol>
        <li> Eleven </li>
        <li> Twelve </li>
     </ol>
  </li>
  <li> Second
    <ol>
       <li> Twenty-one </li>
       <li> Twenty-two </li>
    </ol>
  </li>
</ol>

Here i am getting the content as expected, like 1 and 1.1, however changing the before to marker pseudo element i.e li::marker gives a value like 0 and 0.0.

Although when i use only this css, the output is as expected

   li::marker {content: counters(list-item, '.') ' ';}

I couldn't get why the before and marker pseudo elements are generating different output for this list.

Answer 1

The issue is related to the allowed properties within ::marker. content is allowed but not counter-increment so it's working but without incrementing the counter.

If you move the incrementation to li it works:

ol {
  counter-reset: my-counter 0;
  list-style-type: none;
}

li::marker {
  content: counters(my-counter, '.');
}

li {
  counter-increment: my-counter;
}

<ol>
  <li> First
    <ol>
      <li> Eleven </li>
      <li> Twelve </li>
    </ol>
  </li>
  <li> Second
    <ol>
      <li> Twenty-one </li>
      <li> Twenty-two </li>
    </ol>
  </li>
</ol>

More detail about the allowed properties can be found in the Specification: https://www.w3.org/TR/css-lists-3/#marker-properties