编辑 CSS 内容中文本的颜色

Question

我想更改某些文本的颜色，但该文本位于 CSS 属性“内容”中。有没有办法选择特定的单词并为它们着色？

例如这里是我的代码 .info:before { content: "PLEASE NOTE: this would be something that the user has to note... "; }

我想将“请注意”涂成红色，但保持其他文字与默认颜色相同。这可能吗？

Answer 1

虽然您无法按照您希望的方式设置伪元素内容中的文本格式，但有多种突出显示方式可能会有所帮助，具体取决于您的用例。

我使用的一种方法是使内容等宽，并仅在需要引起用户注意的字符上放置背景颜色。例如，此代码段仅将黄色放在“请注意”字样后面：

.info:before {
  content: "PLEASE NOTE: this would be something that the user has to note... ";
  background-image: linear-gradient(to right, yellow 0, yellow 12ch, transparent 12ch, transparent 100%);
  font-family: monospace;
}

<div class="info">info div</div>

另一种为您提供所需红色字符的方法是使用文本作为剪贴蒙版，并在前两个单词下方将背景设为红色，否则为黑色：

.info:before {
  content: "PLEASE NOTE: this would be something that the user has to note... ";
  font-family: monospace;
  color: #000000;
  background-image: linear-gradient(to right, red 0, red 12ch, black 12ch, black 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    }
}

<div class="info">info div</div>

这为您提供了您想要的外观（如果您可以忍受内容文本的等宽），但您必须检查您想要支持的浏览器是否可以使用文本进行剪辑。

Answer 2

将文本包裹在 span 标签中，以便您可以为其赋予自己的样式。

如果我有这样的 HTML：

<p class="info">NOTE: The stories and information posted here are artistic works of fiction and falsehood.</p>

我想突出显示子字符串“注意：”，我需要像这样调整我的 HTML：

<p class="info"><span>NOTE:</span> The stories and information posted here are artistic works of fiction and falsehood.</p>

然后我可以使用以下 CSS 使其变为红色：

p.info span {
    color:red
}