::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负担。关键是用得恰当，别让装饰干扰内容本身。
