Chrome Incorrectly Rending CSS Content Counters

Problem:

I was looking to replace the browser's default list-style-type with my own custom ::before pseudo-element. I chose this over the ::marker because of some of the styling limitations the ::marker has.

The HTML code I have has "type" attributes that change what kind of character should appear before the li.

HTML code:

<ol type="decimal">
  <li>First ordered item</li>
  <li>Second ordered item
    <ol type="a">
      <li>First ordered item</li>
      <li>Second ordered item
        <ol type="A">
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
    </li>
    </ol>
  </li>  
</ol>

CSS:

This is the CSS I made, using the counter to style it:

ol {
    /*list-style-type: none*/
    counter-reset: li;
}

ol > li:before {
    counter-increment: li;
    content: counter(li) ". ";
    position: relative;
    top: auto;
    left: auto;
    margin-right: 10px;
    color: red;
}

ol[type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[type="a" s] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A" s] > li:before {
    content: counter(li, upper-alpha) ". ";
}

The "s" after type="a" and type="A" means case-sensitive matches. https://caniuse.com/css-case-insensitive

Firefox vs Chrome:

Looking at the rendered, red characters:

Firefox renders these lists correctly, with the first two being numbers, and the second two being lowercase letters and the last two being uppercase letters.

Chrome renders them incorrectly, with everything being numbers.

Is this an issue with my code/browser support, or is this a bug in Google Chrome?

ol {
    /*list-style-type: none*/
    counter-reset: li;
}

ol > li:before {
    counter-increment: li;
    content: counter(li) ". ";
    position: relative;
    top: auto;
    left: auto;
    margin-right: 10px;
    color: red;
}

ol[type="decimal"] > li:before {
    content: counter(li, decimal) ". ";
}

ol[type="a" s] > li:before {
    content: counter(li, lower-alpha) ". ";
}

ol[type="A" s] > li:before {
    content: counter(li, upper-alpha) ". ";
}

<ol type="decimal">
  <li>First ordered item</li>
  <li>Second ordered item
    <ol type="a">
      <li>First ordered item</li>
      <li>Second ordered item
        <ol type="A">
          <li>First ordered item</li>
          <li>Second ordered item</li>
        </ol>
    </li>
    </ol>
  </li>  
</ol>

Thank you.

According to caniuse Chrome does not support the case sensitive modifier at the moment (Decmber 2022).

The link you gave goes to the case-insensitive modifier, which Chrome does support it seems.

So it's an issue with browser support rather than a bug as such or an issue with your code