View in EnglishAlways switch to English

::before

Baseline Widely available

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

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/">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>注意橙色方框的位置。</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

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;}