content属性仅用于::before和::after伪元素，可插入字符串、属性值、计数器、URL图片或Unicode字符，常用于添加图标、引号、编号和提示信息，提升语义与可访问性。
CSS 的 content 属性主要用于在文档中插入生成内容，通常与伪元素 ::before 和 ::after 配合使用。它本身不能直接作用于普通 HTML 元素，只能用于伪元素。下面详细介绍它的使用范围和一些实用技巧。
哪些元素可以使用 content 属性？
content 属性仅适用于 CSS 伪元素，也就是：
- ::before
- ::after
这两个伪元素会生成一个虚拟的子元素，content 属性定义这个虚拟子元素的内容。你不能对 div、span 等常规标签直接设置 content，否则该属性将被忽略。
content 可以插入什么类型的内容？
content 支持多种值类型，灵活实现内容生成：
立即学习“前端免费学习笔记（深入）”；
-
字符串：用引号包裹的文字内容
例：content: "新增"; -
属性值：attr() 获取元素的 HTML 属性
例：content: attr(data-tip); - 计数器：counter() 结合 counter-increment 实现自动编号
- URL 引用：url(image.png) 插入图片等外部资源
-
Unicode 字符：用 \ 开头表示特殊符号
例：content: "\2713"; 显示对勾 ✓
实用技巧示例
通过灵活使用 content，可以增强语义、提升可访问性，同时减少 HTML 冗余。
-
添加图标或标记
给链接外链加图标：
a[href^="http"]:after { content: " \2197"; } -
显示引用来源
为 <q> 标签自动添加引号：
q::before { content: "“"; } q::after { content: "”"; } -
自动生成章节编号
配合计数器实现标题自动编号：
h2 { counter-increment: section; } h2::before { content: "第" counter(section) "节 "; } -
提示信息展示
利用 data- 属性动态显示内容：
[data-label]::before { content: attr(data-label); }
基本上就这些。只要记住：content 只能用于 ::before 和 ::after，但结合文本、属性、计数器和图片，就能实现丰富的视觉效果和结构优化。不复杂但容易忽略细节，比如空格要手动加，字符串必须加引号等。掌握这些技巧，能让样式更简洁、语义更清晰。
