PricingLoginStart free
CSS Academy · 课时

::before 与 ::after 内容

使用 ::before 和 ::after 以及 content 属性，在元素前后插入生成的内容。

第 1 / 4 课13 个步骤

::before 与 ::after 内容 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是伪元素

伪元素会创建虚拟元素，并以它们属于 DOM 的方式设置样式。伪元素使用双冒号 ::。最常用的是 ::before 和 ::after。

::before 和 ::after

::before 会在元素内容之前插入生成的内容。::after 会在元素内容之后插入生成的内容。两者都必须使用 content 属性才能渲染。

<span class="element">Text with generated content</span>

content 属性

content 属性接受：

  • 字符串：content: "text"
  • 空字符串：content: ""（常用于装饰性形状）
  • 网址：content: url("icon.svg")
  • 计数器：content: counter(step)
  • attr()：content: attr(data-tooltip)

装饰性引号

无需将排版引号添加到 HTML 中即可添加它们：

<blockquote>Design is not just what it looks like — design is how it works.</blockquote>

使用空 content 创建形状

将 content: "" 与位置和尺寸结合使用，即可创建无需额外 HTML 的装饰性形状：

<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>

使用 ::after 清除浮动

经典的清除浮动技术使用 ::after 来清除浮动，无需额外标记：

<div class="clearfix" style="border:1px solid #ccc;">
  <div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>

使用 ::after 创建工具提示

使用 ::after 和 attr() 创建仅使用 CSS 的工具提示：

<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>

使用 content: url() 添加图标

使用 content: url() 在链接前插入小图标：

<a href="https://example.com" target="_blank" rel="noopener">External link</a>

伪元素的限制

伪元素不属于 DOM。它们：

  • 用户无法选择或搜索
  • 默认情况下无法被屏幕阅读器访问
  • 无法通过 JavaScript 定位

绝不要将必需的内容放入生成的内容中——伪元素只能用于装饰性用途。

单冒号与双冒号

单冒号（:before）是 CSS2 中的语法。双冒号（::before）是 CSS3 标准，用于区分伪元素和伪类。现代浏览器都支持两种写法，但新代码应使用双冒号。

哪些元素支持 ::before/::after

替换元素（img、input、select、video）无法拥有伪元素，因为它们没有可供插入内容的区域。请改用包装元素来添加装饰。

快速检查

没有可见文本的装饰性 ::before 伪元素需要哪个 content 值？

在交互式课程中回答

回顾

::before 和 ::after 会在元素的实际内容周围插入生成的内容。必须设置 content 属性。请将它们用于装饰性形状、图标、引号和工具提示，但绝不要用于用户需要访问或阅读的重要内容。

免费开始

用 AI 导师学习 CSS — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程
40
课程
159
免费开始学习查看完整课程

常见问题解答

「::before 与 ::after 内容」课时是免费的吗？

是的 — 「::before 与 ::after 内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「::before 与 ::after 内容」这节课中我会学到什么？

使用 ::before 和 ::after 以及 content 属性，在元素前后插入生成的内容。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「::before 与 ::after 内容」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. ::before 与 ::after 内容
  2. ::placeholder、::selection 与 ::marker
  3. 使用 ::before 的 CSS 计数器
  4. 使用伪元素创建装饰图案
← 返回 CSS Academy