::before content

在CSS中，使用::before可以在元素的内容之前插入一个伪元素（Pseudo-Element），而content属性则用于定义该伪元素的内容。

语法

::before和content属性的语法如下：

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

其中，selector为需要插入伪元素的元素的选择器，content为伪元素的内容。content既可以是字符串，也可以是属性值，也可以使用CSS函数。

注意事项

• 该属性只能应用于带有content属性的伪元素
• 当使用content属性时，只有插入的文本才能显示在伪元素内容中
• 通过修改content属性的值，可以随意添加或删除文本
• 该属性仅适用于::before伪元素，::after伪元素的工作原理类似

示例

/* 插入文本 */
div::before {
  content: "前缀：";
}

/* 插入属性值 */
a::before {
  content: attr(href);
}

/* 使用CSS函数 */
button::before {
  content: "主页";
  font-weight: bold;
}

button:hover::before {
  content: url("home-hover.png");
}

以上示例中，分别演示了在div、a、button元素的前缀中插入文本、插入属性值以及使用CSS函数修改伪元素内容的方法。

总结

::before和content是CSS中非常实用的技巧。通过使用这些功能，我们可以轻松地在需要的元素元素前面添加装饰、前缀或者一些特殊的文字内容。