如何仅用 css 改变 <p> 每个字母的颜色

Question

我正在尝试更改每个字母的样式，但是 我被限制使用 javascript 并且没有为每个字母使用 span，我搜索了一些伪 nth-letter 但这不起作用，我知道之前问过这种类型的问题，但限制迫使我添加这个问题。

请给点建议，很有帮助

.change:nth-letter(3)
{
color:red;
font-size:20px;
}

<p class="change"> Color </p>

Answer 1

我认为，您不能将伪元素用作 :second-letter 或 :third-letter。 select 第一个词和最后一个词的可能方法如下。

.hello:first-letter {
  color:red;
}
.hello:after {
  color: red;
  content: "r";
}

<p class="hello">Colo</p>

Answer 2

这是一个 hack，它使用：

a monospace 字体使每个字母具有统一的宽度
内联显示，使容器的宽度与其文本一样多
使用实验性 background-clip: text 剪辑背景到文本
使用 linear-gradient 为每个字母着色

参见下面的演示：

.change {
  font-size: 20px;
  font-family: monospace;
  display: inline;
  -webkit-background-clip: text;
  background-clip: text;
  color:transparent;
  background-image: linear-gradient(to right, black 40%, red 40% 60%, black 60%);
}

<p class="change"> Color </p>

如何仅用 css 改变 <p> 每个字母的颜色

how to change color of each letter of <p> with just css

css

pseudo-class