::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.
尝试一下
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> 语法
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 |