仅使用CSS的多色文本

我不确定我的标题是否连贯地表达了我的问题，但我将在下面解释

我想仅使用CSS为文本字符串中的每个字符指定不同的颜色

要查看我的问题并进一步解释，请执行以下操作：

我不能用这个，而且它有点费时：

<!--I don't want this, and I cannot use it-->
<span style="font-family: tahoma">
<span style="color: red">U</span>
<span style="color: blue">s</span>
<span style="color: red">e</span>
<span style="color: blue">r</span>
<span style="color: red">n</span>
<span style="color: blue">a</span>
<span style="color: red">m</span>
<span style="color: blue">e</span>
</span>

U
s
E
R
N
A.
M
E

我想要这个，只能用这个：

<span class="username">Username</div>

用户名

其中“用户名”将由CSS定义。这就是我需要的。这显然也会产生与HTML版本相同的效果

---

我之所以需要它只出现在CSS中，是因为我在Xenforo用户名上使用了这段代码。我以前看过，所以我知道这是很有可能的。我在谷歌上搜索了大约半个小时，尝试了梯度，但无法复制。我希望有人能提供帮助。

哑巴CSS唯一的解决方案-您需要将每个字母放入单独的

中，这样您就可以使用

：n个孩子（2n+1）

.username span{
颜色：红色；
}
.用户名范围：第n个子项（2n+1）{
颜色：蓝色；
}

---

Username

这只需CSS即可实现，但需要注意以下几点：

• 必须使用单空格字体
• 所需的文本必须传递给CSS

总的原则是：

• 以所需的基色输出整个单词
• 使用绝对定位的伪元素来输出替代颜色，这是通过指定所需的字母并为保留基色的字母使用空格来实现的

这是因为单空格字体中的字母占用相同的空间（因此可以确保字母位于正确的位置）。通过使用绝对定位，字母可以放置在HTML中单词集的顶部

.username{
颜色：红色；
字体系列：monospace；
位置：相对位置；
}
.username:after{
颜色：蓝色；
内容：attr（数据描述）；
左：0；
位置：绝对位置；
}

---

username

我认为这是不可能的。你可以用

：：first letter

来设计第一个字母的样式，但是没有像

：：n letter（n）

那样的伪元素，所以你在这里运气不好。我几乎100%肯定这是绝对可能的，正如我在一个类似的论坛上看到的那样，由同一个引擎驱动，这意味着他们也只能使用CSS。虽然，这个论坛是由我所知道的一些最好的程序员管理的，但我相信这是可能的。因此，如果你不能自己检查代码，请给我们一个链接，链接到这个拥有世界上最好的程序员的超级论坛。可能的