在纯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>

A，看来“ attr（score number，0）”始终为0。这不是由于后备，因为当我将后备数更改为42时，结果保持为0。这在其他地方不是问题代码，因为当我用数字42代替attr(...)时，它可以正常工作。

那么这段代码为什么不显示应该显示的内容呢？

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

屏幕截图：