Конвертировать арабские цифры в римские цифры в чистом CSS

Question

Я пишу собственную тему для веб-сайта, поэтому я не могу использовать Javascript. Я хотел бы преобразовать некоторые числа в римские цифры .

Я пробовал это:

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

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

Увы, кажется, что "attr (число баллов, 0)" всегда равно 0. Это не из-за отказа, так как когда я изменяю число возврата на 42, результат остается равным 0. Это не проблема где-то еще в код, потому что он отлично работает, когда я заменяю attr(...) на число, подобное 42.

Так почему этот код не показывает то, что должен?

Answer 1

Вы можете использовать var для передачи правильных значений в ваши CSS-файлы и счетчик, например:

.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>

Answer 2

Даже сегодня attr() все еще поддерживается только для использования content:, а не для чего-либо еще, как вы можете видеть из всех красных флажков здесь: https://caniuse.com/#feat=css3-attr

Снимок экрана: