如何仅用css更改<p>每个字母的颜色[重复]答案

【问题标题】：how to change color of each letter of <p> with just css [duplicate]如何仅用css更改<p>每个字母的颜色[重复]
【发布时间】：2019-04-16 17:32:35
【问题描述】：

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

请给点建议，真的很有帮助

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

&lt;p class="change"&gt; Color &lt;/p&gt;

【问题讨论】：

你会使用 CSS 吗？ “我已限制使用 javascript”是什么意思？
是的，但不能使用 javascript，也不能为每个字母提供类似 span 的元素

标签： css pseudo-class

【解决方案1】：

这是一个 hack，它使用：

等宽字体，使每个字母的宽度一致
inline 显示，使容器的宽度与其文本一样多
使用实验性 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%);
}

&lt;p class="change"&gt; Color &lt;/p&gt;

【讨论】：

好主意，它确实会起作用，但需要额外的努力:)

【解决方案2】：

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

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

&lt;p class="hello"&gt;Colo&lt;/p&gt;

【讨论】：