::before和::after伪元素通过content属性在元素前后插入装饰内容，常用于添加图标、引号等视觉效果；必须设置content，仅适合非关键性内容，且建议使用双冒号语法以符合CSS3标准。
在CSS中，使用::before和::after伪元素可以在选定元素的内容前或内容后插入装饰性内容，而无需修改HTML结构。这种技术常用于添加图标、引号、分隔符或视觉修饰，提升页面表现力。
这两个伪元素必须配合content属性使用，否则不会显示。它们生成的是行内元素，可以设置样式如颜色、字体、大小等。
.element::before {
content: "★";
color: gold;
}
.element::after {
content: "（已验证）";
color: #666;
font-size: 0.9em;
}
上面代码会在.element内容前加一个金色星号，内容后加“（已验证）”文字。
通过灵活运用，可以实现多种视觉效果：
立即学习“前端免费学习笔记（深入）”；
width、height、background等属性绘制小装饰块。::after做clearfix。使用时需注意以下几点以避免问题：
content: "";，不能省略。::before和::after是CSS3标准，单冒号用于兼容旧IE，但建议统一用双冒号。基本上就这些。掌握::before和::after能让你的样式更简洁、结构更干净，是前端开发中非常实用的小技巧。
以上就是CSS伪元素选择器如何添加装饰内容_使用::before和::after添加前后内容的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
706
收藏
取消收藏
