::before

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

CSS 中，::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。

尝试一下

a {
  color: #0000ff;
  text-decoration: none;
}

a::before {
  content: "🔗";
}

.local-link::before {
  content: url("/shared-assets/images/examples/firefox-logo.svg");
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

<p>
  Learning resources for web developers can be found all over the internet. Try
  out
  <a href="https://web.dev/">web.dev</a>,
  <a href="https://www.w3schools.com/">w3schools.com</a> or our
  <a href="https://developer.mozilla.org/" class="local-link">MDN web docs</a>.
</p>

备注： 由 ::before 和 ::after 伪元素生成的盒子，就好像它们是应用它们的元素或“原始元素（originating element）”的直接子元素一样，因此不能应用于替换元素，比如 <img> 元素，其内容不在 CSS 格式化模型的范围内。

语法

css
::before {
  content: /* 值 */;
  /* 属性 */
}

如果 content 属性没有明确指定，或者有一个无效值，或者其值为 normal 或 none，则 ::before 伪元素不会被渲染。它的行为就好像设置了 display: none 一样。

备注： Selectors 第 3 版引入了双冒号标记法 ::before，以将伪类和伪元素区别开。浏览器也接受由 CSS2 引入的 :before 写法。

示例

加入引号标记

使用 ::before 伪元素的一个简单示例就是用于加入引号。此处同时使用了 ::before 和 ::after 来插入引用性文本。

HTML

html
<q>有引号，</q>他说，<q>总比没有好。</q>

CSS

css
q::before {
  content: "“";
  color: blue;
}
q::after {
  content: "”";
  color: red;
}

结果

修饰示例

我们可以用几乎任何方法定义 content 中的文字和图片样式。

HTML

html
<span class="ribbon">注意橙色方框的位置。</span>

CSS

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

.ribbon::before {
  content: "看橙色的盒子。";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

结果

待办列表

在本例中我们将使用伪元素来创建一个简单的待办列表。这个方法也可用于 UI 的小幅度更改和用户体验的提升。

HTML

html
<ul>
  <li>买牛奶</li>
  <li>带着狗散步</li>
  <li>锻炼</li>
  <li>写代码</li>
  <li>播放音乐</li>
  <li>放松</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,
);

下面展示的是最终得到的结果。请注意我们没有使用任何图标，对勾标识实际上是使用 CSS 定义了样式的 ::before 伪元素。接下来建立几个待办事项来完成它们吧。

结果

特殊字符

由于这是 CSS；不是 HTML，你不可以在内容值中使用标记实体。如果你需要使用特殊字符，并且无法将其直接输入到 CSS 内容字符串中，那么请使用 unicode 转义序列，该序列由一个反斜杠和十六进制 unicode 值组成。

HTML

html
<ol>
  <li>把鸡蛋打入碗中</li>
  <li>加牛奶</li>
  <li>加面粉</li>
  <li aria-current="step">混合成光滑的面糊</li>
  <li>将一勺面糊倒在热的、抹了油的平底锅上</li>
  <li>煎至煎饼顶部失去光泽</li>
  <li>把它翻过来再煎几分钟</li>
  <li>配上你喜欢的佐料</li>
</ol>

CSS

css
li {
  padding: 0.5em;
}

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

li[aria-current="step"]::after {
  content: " \21E6"; /* 向左白色箭头的十六进制 */
  display: inline;
}

结果

无障碍考虑

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

规范

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

浏览器兼容性

参见