答案：::before与::after需配合content使用，可添加装饰内容、图形或实现自动编号，常用于增强视觉效果与布局灵活性。
使用 ::before 与 ::after 伪元素，可以在不修改 HTML 的情况下为元素添加装饰性内容或结构增强。掌握一些实用技巧，能让 CSS 更加灵活高效。
基本语法与content属性
这两个伪元素必须配合 content 属性使用才能显示内容，即使内容为空也要写上空字符串。
• content 可以是文字、引号、计数器或图片 URL• 常见写法：::before { content: ""; }
• 空内容常用于图形生成（如清除浮动、三角形等）
示例：
.quote::before {
content: "“";
font-size: 2em;
}
.quote::after {
content: "”";
}
创建装饰性图形
利用 ::before 和 ::after 制作图标、小标记或形状，减少图片依赖。
立即学习“前端免费学习笔记（深入）”；
• 用 border 搭建三角形提示箭头• 配合 border-radius 画圆形或心形
• 多层叠加实现复杂图标（如加号、叉号）
常见技巧：
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #000;
transform: translateX(-50%);
}
辅助布局与视觉增强
在不增加 DOM 结构的前提下提升界面表现力。
• 为列表项添加小圆点或分隔符• 在链接后加外部链接图标
• 实现双边框、阴影叠加等效果
例子：给外部链接加图标
a[href^="http"]::after {
content: "↗";
font-size: 0.8em;
color: #999;
margin-left: 4px;
}
结合CSS计数器实现自动编号
在文章标题、步骤列表中动态生成序号，维护更方便。
• 父容器设置 counter-reset• 子元素用 ::before 插入计数
• 使用 counter-increment 自增
ol {
counter-reset: step-counter;
}
.step::before {
counter-increment: step-counter;
content: "Step " counter(step-counter) ": ";
}
基本上就这些常用场景。关键是理解伪元素是行内元素，默认不占布局空间，通常要设 position 或 display 才能精准控制位置和尺寸。合理使用能简化结构，提升可维护性。
