答案：::before与::after需配合content使用，可添加装饰内容、图形或实现自动编号，常用于增强视觉效果与布局灵活性。
使用 ::before 与 ::after 伪元素，可以在不修改 HTML 的情况下为元素添加装饰性内容或结构增强。掌握一些实用技巧，能让 CSS 更加灵活高效。
这两个伪元素必须配合 content 属性使用才能显示内容，即使内容为空也要写上空字符串。
• content 可以是文字、引号、计数器或图片 URL示例：
.quote::before {
content: "“";
font-size: 2em;
}
.quote::after {
content: "”";
}
利用 ::before 和 ::after 制作图标、小标记或形状，减少图片依赖。
立即学习“前端免费学习笔记（深入）”；
• 用 border 搭建三角形提示箭头常见技巧：
.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;
}
在文章标题、步骤列表中动态生成序号，维护更方便。
• 父容器设置 counter-reset
ol {
counter-reset: step-counter;
}
.step::before {
counter-increment: step-counter;
content: "Step " counter(step-counter) ": ";
}
基本上就这些常用场景。关键是理解伪元素是行内元素，默认不占布局空间，通常要设 position 或 display 才能精准控制位置和尺寸。合理使用能简化结构，提升可维护性。
以上就是css ::before与::after生成内容技巧的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
646
收藏
