css - 仅使用 CSS 的多色文本

Question

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

我想使用 only CSS 为文本字符串中的每个字符分配不同的颜色。

要查看我的问题的视觉图以及进一步的解释:http://codepen.io/Connor3xL/pen/ZOyzJK

我不能用这个，而且它有点耗时:

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

我想要这个而且只能用这个:

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

其中“用户名”将由 CSS 定义。那个 CSS 正是我所需要的。这显然也与 HTML 版本具有相同的效果。

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

Answer 1

这可以仅使用 CSS 来实现，但有一些注意事项:

• 必须使用等宽字体
• 所需的文本必须传递给 CSS

一般原则是:

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

这是可行的，因为等宽字体中的字母占用相同的空间量(因此您可以确定字母将位于正确的位置)。通过使用绝对定位，字母可以放在 HTML 中的单词集之上。

.username {
  color: red;
  font-family: monospace;
  position: relative;
}
.username:after {
  color: blue;
  content: attr(data-descr);
  left: 0;
  position: absolute;
}

<div class="username" data-descr="u e n m">username</div>

JS Fiddle