CSS的content属性妙用指南

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

---

一、主要功能

1. 插入文本内容

   p::before { 
     content: "提示："; 
     color: red;
   }
   

   → 在每个 <p> 元素前添加红色文字“提示：”

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

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

3. 显示元素属性值

   a::after {
     content: " (" attr(href) ")"; /* 显示链接地址 */
   }
   

   → 效果：<a href="https://xxx">示例</a> 显示为 示例 (https://xxx)

4. 计数器数字生成

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

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

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

   .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 更新实时变化（如计数器、属性值变化）

---

三、注意事项

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

---

经典应用场景

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

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

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