Convert arabic numerals in roman numerals in pure CSS

Question

I'm writing a custom theme for a website, so I cannot use Javascript. I would like to convert some numbers to roman numerals.

I tried this:

.score:before {
  counter-reset: mycounter attr(score number, 0);
  content: counter(mycounter, upper-roman) " ";
}

 <p><span class="score" score="11">points</span></p>

Alas, it seems that "attr(score number, 0)" is always 0. It's not because of a fallback, since when I change the fallback number to 42, the result stays 0. It's not a problem somewhere else in the code, because it works fine when I replace attr(...) by a number like 42.

So why isn't this code showing what it should?

Answer 1

Even today, attr() is still only supported for content: usage, not for anything else, as you can see from all the red flags here: https://caniuse.com/#feat=css3-attr

Screenshot:

Answer 2

You can use var to pass proper values to your css files and counter, for example:

.score {
   counter-increment: my-awesome-counter 0;
   counter-reset: my-awesome-counter var(--data-score);
}

.score:before {
  content: counter(my-awesome-counter, upper-roman);
  margin-right: 5px;
}

<p><span style="--data-score:11" class="score" score='11'>points</span></p>