将阿拉伯数字转换为纯罗马数字 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(score number, 0)"总是0。这不是因为回退，因为当我将回退数更改为42时，结果保持为0。这不是代码中其他地方的问题，因为当我用 42.

之类的数字替换 attr(...) 时它工作正常

那么为什么这段代码没有显示它应该显示的内容？

Answer 1

即使在今天，attr() 仍然只支持 content: 用法，不支持任何其他用途，正如您从此处的所有危险信号中看到的那样：https://caniuse.com/#feat=css3-attr

截图：

Answer 2

您可以使用 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>

将阿拉伯数字转换为纯罗马数字 CSS

Convert arabic numerals in roman numerals in pure CSS

html

css

roman-numerals

css-content

css-counter