[分享]css中before的颜色怎么设置

在 CSS 中，可以用伪元素 ::before 在元素的内容前面插入一个生成的内容。那么，我们如何为这个生成的内容设置颜色呢？ 首先，我们需要了解伪元素的基本用法，其语法如下： css selecto...

在 CSS 中，可以用伪元素 ::before 在元素的内容前面插入一个生成的内容。那么，我们如何为这个生成的内容设置颜色呢？
首先，我们需要了解伪元素的基本用法，其语法如下：

css
selector::before {
  content: "...";
} 

其中，selector 可以是元素选择器、类选择器、ID 选择器或其他任何有效选择器。content 属性定义了要在元素前面插入的内容。
接下来，我们就可以通过设置 ::before 的 color 属性来为生成的内容设置颜色了，如：

css
p::before {
  content: "“";
  color: red;
} 

这里我们使用了 p 元素的 ::before 伪元素，并设置其生成的内容为左双引号，颜色为红色。需要注意的是，颜色属性需要在 content 属性之后设置。
如果需要设置背景色，可以使用 ::before 的 background-color 属性：

css
pre::before {
  content: "代码:";
  background-color: yellow;
} 

在这个例子中，我们为 pre 元素的 ::before 伪元素设置了生成的内容为 “代码:”，并设置了其背景色为黄色。
总之，通过设置 ::before 的 color 和 background-color 属性，我们可以为生成的内容设置不同的颜色和背景色，达到更好的视觉效果。