CSS 伪元素 before after 的 content 属性

FreeGuideOnline 最新 2026-07-06


```css
a::after {
  content: " (" attr(href) ")"; /* 显示链接地址 */
  font-size: 0.8em;
}

a[data-tooltip]::after {
  content: attr(data-tooltip);
  /* 配合定位可实现自定义 tooltip */
}

4. 图片 / 资源引用 `url()`

可以插入图像、SVG 或任何可被 URL 引用的资源，相当于一个 background-image 的替代，但这里内容本身是替换元素（需注意尺寸控制）。

.icon-pdf::before {
  content: url("icon-pdf.png");
  margin-right: 5px;
}

注意：使用 url() 插入的图像无法由 CSS 直接控制其尺寸，通常推荐使用 background-image 并设置固定宽高。

5. 计数器 `counter()` / `counters()`

结合 CSS 计数器，可以自动生成序号、层级编号等。非常适合制作有序列表、章节编号或图表标记。

ol {
  counter-reset: section;
}
li::before {
  counter-increment: section;
  content: "第 " counter(section) " 章、"; /* 拼接字符串和计数器 */
}

对于嵌套列表，使用 counters() 可以显示完整路径，如 1.2.3。

6. 特殊引号 `open-quote` / `close-quote`

与 quotes 属性配合，根据 <q> 标签或自定义嵌套生成对应语言的引号。

blockquote {
  quotes: "「" "」" "『" "』";
}
blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}

7. 特殊值 `none`

将 content 设置为 none 会使伪元素不生成任何盒子，相当于移除了该伪元素。

.hide-deco::before {
  content: none;
}

实际应用场景与代码示例

场景一：添加装饰图标

无需额外空标签，为按钮或链接添加箭头、图标。

.btn-arrow::after {
  content: " →";
  transition: margin 0.2s;
}
.btn-arrow:hover::after {
  margin-left: 5px;
}

场景二：必填字段标签的 “*” 号

表单标签后自动加星号，且颜色可控。

label.required::after {
  content: " *";
  color: red;
}

场景三：清晰的浮动闭合

容器包含浮动子元素时，通过 ::after 创建块级格式化上下文。

.container::after {
  content: "";
  display: block;
  clear: both;
}

场景四：自定义引用块样式

为 <blockquote> 添加大号装饰引号。

blockquote {
  position: relative;
  padding-left: 40px;
}
blockquote::before {
  content: "“";
  font-size: 4rem;
  color: #ccc;
  position: absolute;
  left: 0;
  top: -10px;
  line-height: 1;
}

场景五：在打印样式中显示链接地址

通过 @media print 让超链接的 href 在打印时显示出来。

@media print {
  a[href]::after {
    content: " [" attr(href) "]";
    font-size: 0.8em;
    color: gray;
  }
}

关键注意事项

可访问性
content 生成的内容通常不会被屏幕阅读器读出，因此关键信息不应只通过伪元素传递。装饰性内容可以使用，重要语义信息请放在 HTML 中。
无法被鼠标选中和复制
大多数浏览器中，::before、::after 的文本无法被用户选中和复制。不要将核心内容放在伪元素中。
伪元素属于元素内部
::before 被插入为元素的第一个子元素，::after 为最后一个子元素。它们的定位和盒模型都基于所属元素。
content 可以组合多个值
用空格分隔即可拼接，例如：
```
content: "[" counter(step) "] " attr(title);
```

4. 图片 / 资源引用 url()

5. 计数器 counter() / counters()

6. 特殊引号 open-quote / close-quote

7. 特殊值 none