htmlcssroman-numeralscss-contentcss-counter

Convert arabic numerals in roman numerals in pure CSS

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?

Solution

  • 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:

    caniuse-attr