在纯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(...)时，它可以正常工作。

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

- Antoine Pietri

Answer 1

即使在今天，attr() 仍然只支持用于 content: 的用法，而不支持其他任何用法，您可以从这里看到所有的红色标志：https://caniuse.com/#feat=css3-attr 截图如下：

- Peter B

---

我认为这是主要的障碍。我现在将您的回复标记为已接受，但如果有人有天才想法，可以通过纯CSS方式进行黑客攻击而不需要此功能，那将是很棒的！ - Antoine Pietri

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>

- Łukasz Blaszyński

---

这不需要编辑HTML吗？我只控制文件的CSS，所以我不知道那是否可行。我能从分数属性中派生一个变量吗？ - Antoine Pietri

变量是从CSS属性中获取的，这就是为什么我将其放入样式中的原因，得分属性在此情况下未被使用。 - Łukasz Blaszyński