Question

我正在尝试更改每个字母的样式，但是我被限制使用javascript，并且不对每个字母使用跨距，我搜索了一些伪{{1 }}但这不起作用，我知道之前曾问过这种类型的问题，但由于限制，我不得不添加这个问题。

请提出一些建议，真的很有帮助

nth-letter

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

Answer 1

这是使用以下内容的 hack ：

一种 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>

Answer 2

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

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

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

如何仅使用CSS更改<p>每个字母的颜色

2 个答案: