CSS的content属性妙用指南

CSS 的 content 属性专门用于 ::before 和 ::after 伪元素，用于动态生成内容并插入到文档流中。其核心作用如下：

一、主要功能

插入文本内容
css 复制代码
```
p::before { 
  content: "提示："; 
  color: red;
}
```
→ 在每个 <p> 元素前添加红色文字"提示："

插入图标（结合字体图标库）

css 复制代码

.download::after {
  content: "\f019"; /* FontAwesome 下载图标的 Unicode */
  font-family: "Font Awesome"; 
}

显示元素属性值
css 复制代码
```
a::after {
  content: " (" attr(href) ")"; /* 显示链接地址 */
}
```
→ 效果：<a href="https://xxx">示例</a> 显示为 示例 (https://xxx)

计数器数字生成

css 复制代码

body { counter-reset: section; }
h2::before {
  counter-increment: section;
  content: "第" counter(section) "章 ";
}

→ 自动为每个 <h2> 添加"第1章"、"第2章"等序号

创建纯样式元素（空内容）

css 复制代码

.tooltip::after {
  content: "";
  display: block;
  width: 0;
  border: 10px solid transparent;
  border-top-color: black;
}

→ 用空内容生成三角形箭头

二、关键特性

特性	说明
仅限伪元素	只能用于 `::before`、`::after`、`::marker` 等伪元素
不改变 DOM	生成的内容不真实存在于 HTML 中，仅视觉展示
支持特殊格式	可插入 Unicode、URL、计数器(`counter()`)、属性值(`attr()`) 等
动态渲染	内容随 CSS 更新实时变化（如计数器、属性值变化）

三、注意事项

不可访问性风险
- 屏幕阅读器可能忽略生成的文本内容（需用 aria-label 补充）
不能替代实际内容
- 重要文本应写在 HTML 中，避免 SEO 和可访问性问题
浏览器兼容性
- 计数器(counter()) 在旧版 IE 中支持较差

经典应用场景

css 复制代码

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 链接文件类型提示 */
a[href$=".pdf"]::after {
  content: " (PDF)";
  color: #e74c3c;
}

📌 本质：content 是 CSS 向文档注入装饰性内容的工具，而非内容结构化手段。其设计初衷是增强视觉表现力，而非承载核心内容。