17370845950

伪元素::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() 函数。

当鼠标悬停时显示附加信息：

abbr::after {
  content: " (" attr(title) ")";
  color: #666;
}

对应HTML：HTML，将显示为 “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 配合伪元素，能让你的页面更简洁美观。