::before

在 CSS 中，**::before** 创建一个伪元素，它是所选元素的第一个子元素。它通常与content 属性一起使用，用于向元素添加装饰性内容。默认情况下它是内联的。

试一试

注意：由::before 和::after 生成的伪元素是像它们是应用它们的元素（或“源元素”）的直接子元素一样生成的盒子，因此不能应用于替换元素，例如<img>，其内容位于 CSS 格式化模型的范围之外。

语法

css
::before {
  content: /* value */;
  /* properties */
}

如果未指定content 属性，其值为无效值，或其值为normal 或none，则不会呈现::before 伪元素。它的行为就像设置了display: none 一样。

注意：选择器级别 3 引入了双冒号表示法::before 以区分伪类 和伪元素。浏览器也接受 CSS2 中引入的单冒号表示法:before。

无障碍访问

不建议使用::before 伪元素添加内容，因为它无法可靠地被屏幕阅读器访问。

示例

添加引号

使用::before 伪元素的一个简单示例是提供引号。这里我们使用::before 和::after 来插入引号字符。

HTML

html
<q>Some quotes</q>, he said, <q>are better than none.</q>

CSS

css
q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

结果

装饰性示例

我们几乎可以以任何我们想要的方式在content 属性中设置文本或图像的样式。

HTML

html
<span class="ribbon">Notice where the orange box is.</span>

CSS

css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

结果

待办事项列表

在这个例子中，我们将使用伪元素创建一个简单的待办事项列表。这种方法通常可以用来为 UI 添加一些小的修饰，并改善用户体验。

HTML

html
<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

CSS

css
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

js
const list = document.querySelector("ul");
list.addEventListener(
  "click",
  (ev) => {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);

以下是上面代码示例的实时运行情况。请注意，没有使用任何图标，复选标记实际上是::before，它已在 CSS 中设置了样式。继续完成一些事情吧。

结果

特殊字符

由于这是 CSS 而不是 HTML，因此您**不能**在内容值中使用标记实体。如果您需要使用特殊字符，并且无法将其直接输入 CSS 内容字符串中，请使用 Unicode 转义序列，该序列由反斜杠后跟十六进制 Unicode 值组成。

HTML

html
<ol>
  <li>Crack Eggs into bowl</li>
  <li>Add Milk</li>
  <li>Add Flour</li>
  <li aria-current="step">Mix thoroughly into a smooth batter</li>
  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
  <li>Fry until the top of the pancake loses its gloss</li>
  <li>Flip it over and fry for a couple more minutes</li>
  <li>serve with your favorite topping</li>
</ol>

CSS

css
li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::after {
  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
  display: inline;
}

结果

规范

规范
CSS 伪元素模块级别 4
# 生成内容

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅