伪元素::before和::after配合content可在不修改HTML的情况下插入内容，适用于添加装饰性文本、图标等；content支持纯文本、attr()属性值、counter()计数器及Unicode符号，如a::after{content:"（外链）";}或abbr::after{content:" ("attr(title)")";}；插入内容仅视觉呈现，不影响DOM，不可选中且可能影响无障碍访问，建议用于非关键信息。
在CSS中，伪元素（如 ::before 和 ::after）配合 content 属性，可以在不修改HTML结构的前提下向元素前后插入内容。这在添加装饰性文本、图标或提示信息时非常实用。
content 属性的基本用法
content 属性只能用于伪元素 ::before 和 ::after，定义要插入的内容。它可以是：
- 纯文本内容：用引号包裹字符串
- 属性值：通过 attr() 获取元素的某个属性
- 计数器：结合 counter() 显示编号
- 特殊字符或Unicode符号
示例：添加静态文本
给每个链接后面加上“（外链）”说明：
立即学习“前端免费学习笔记（深入）”；
a::after {
content: "（外链）";
}
使用 attr() 插入动态文本
若想根据HTML属性动态生成内容，可用 attr() 函数。
示例：显示title提示当鼠标悬停时显示附加信息：
abbr::after {
content: " (" attr(title) ")";
color: #666;
}
对应HTML：<abbr title="HyperText Markup Language">HTML</abbr>，将显示为 “HTML (HyperText Markup Language)”。
插入特殊符号与图标
content 支持Unicode字符，适合添加箭头、引号、图标等。
.quote::before {
content: "\201C"; /* 左双引号 */
font-size: 1.5em;
color: #999;
}
常见Unicode示例：
- \2713 → ✓（对勾）
- \2718 → ✘（叉号）
- \2192 → →（右箭头）
注意事项与限制
使用 content 添加的文本属于生成内容，有以下特点：
- 仅视觉可见，不影响DOM结构
- 屏幕阅读器可能无法读取，不利于无障碍访问
- 不能被用户选中或复制（部分浏览器支持）
- 必须设置 display 属性才能控制布局（如 inline-block）
建议仅用于装饰性或辅助性文本，关键信息仍应写在HTML中。
基本上就这些。灵活使用 content 配合伪元素，能让你的页面更简洁美观。
