CSS ::before 伪元素

定义和用法

CSS ::before 伪元素用于在指定元素的内容之前插入一些内容。

使用 content 属性指定要插入的内容。content 的值可以是：

• 字符串：content: "Hello world!";
• 图片：content: url(myimage.jpg);
• 无内容：content: none;
• 计数器：content: counter(li);
• 引号：content: open-quote;
• 属性值：content: " (" attr(href) ")";

提示：请注意，插入的内容仍然位于指定元素内部。插入的内容会添加到元素内部的其他内容之前。

使用 ::after在特定元素的内容之后插入一些内容。

实例

例子 1

在每个 <p> 元素的内容之前插入一个字符串：

p::before {
  content: "Read this: ";
}

亲自试一试

例子 2

在每个 <p> 元素的内容之前插入一个字符串，并设置插入内容的样式：

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

亲自试一试

CSS 语法

::before {
  css declarations;
}

技术细节

浏览器支持

表格中的数字指定了完全支持该伪元素的首个浏览器版本。