CSS伪元素::before和::after如何使用_内容插入与装饰效果

::before 和 ::after 可在不修改HTML的情况下为元素添加装饰性内容，必须配合content属性使用，常用于插入文本、图标、特殊符号或创建气泡箭头、边框高光等视觉效果，提升页面表现力。

CSS伪元素 ::before 和 ::after 能在不修改HTML结构的前提下，为元素添加装饰性内容或视觉效果。它们不会出现在DOM中，但可以在页面上渲染出额外的内容或样式，常用于图标、提示、装饰线条等场景。

::before 与 ::after 基本语法

这两个伪元素必须配合 content 属性使用，否则不会显示。content 可以是文本、引号、计数器，甚至为空字符串（用于纯装饰）。

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

::after {
  content: " ✉";
  font-size: 12px;
}

上面的代码会在元素内容前加上“提示：”，后面加一个邮件图标。

插入动态内容与特殊符号

利用 content 插入静态或Unicode字符，增强可读性或美观度。

• 用 \00a9 显示 © 版权符号
• 用 \2713 显示 ✓ 对勾
• 结合 attr() 提取HTML属性值，如显示链接标题：
  a::after { content: " (" attr(title) ")"; }

创建装饰性图形与样式

通过定位和形状控制，::before 和 ::after 可以绘制小三角、阴影、边框高光等视觉元素。

• 制作气泡对话框的小箭头：
  利用 ::after 创建一个三角形，通过 border 模拟，再绝对定位到主体旁。
• 为标题添加装饰线或图标：
  在 h3::before 中设置 content: ""; 并用 background 或 border 绘制竖条或点。
• 实现双层文字阴影或发光效果：
  使用 ::before 覆盖文字并设置模糊和颜色，形成外发光。

实用技巧与注意事项

合理使用能提升表现力，但也需注意可访问性和维护性。

• 若插入的内容对理解至关重要（如必填标记 *），应放在HTML中，避免屏幕阅读器忽略
• content 为空时仍需写成 content: "";
• 伪元素默认是 inline，根据需要设置 display: block、inline-block 等
• 可结合 CSS 动画，比如 hover 时从 ::before 拉出一条下划线

基本上就这些。掌握 ::before 和 ::after 的用法，能让页面细节更精致，又不增加HTML负担。关键是用得恰当，别让装饰干扰内容本身。