::before和::after伪元素通过content属性在元素前后插入装饰内容，常用于添加图标、引号等视觉效果；必须设置content，仅适合非关键性内容，且建议使用双冒号语法以符合css3标准。
在CSS中，使用::before和::after伪元素可以在选定元素的内容前或内容后插入装饰性内容，而无需修改html结构。这种技术常用于添加图标、引号、分隔符或视觉修饰，提升页面表现力。
理解::before和::after的基本语法
这两个伪元素必须配合content属性使用，否则不会显示。它们生成的是行内元素，可以设置样式如颜色、字体、大小等。
.element::before { content: "★"; color: gold; } .element::after { content: "（已验证）"; color: #666; font-size: 0.9em; }
上面代码会在.element内容前加一个金色星号，内容后加“（已验证）”文字。
常见用途与实用技巧
通过灵活运用，可以实现多种视觉效果：
立即学习“前端免费学习笔记（深入）”；
- 添加引号：在引用文本前后加入智能引号，增强语义表达。
- 插入图标或符号：比如在链接前加外链图标，在警告信息后加感叹号。
- 创建几何图形：结合
width、height、background等属性绘制小装饰块。 - 清除浮动或布局辅助：虽然现在有更优方案，但仍有人用
::after做clearfix。
注意事项与最佳实践
使用时需注意以下几点以避免问题：
- content属性不能为空：即使只想要空格，也要写成
content: "";，不能省略。 - 仅适合装饰性内容：搜索引擎和屏幕阅读器可能忽略伪元素内容，关键信息不应放在其中。
- 可被用户样式覆盖：某些浏览器扩展或高对比度模式下可能不显示。
- 支持现代双冒号写法：
::before和::after是css3标准，单冒号用于兼容旧IE，但建议统一用双冒号。
基本上就这些。掌握::before和::after能让你的样式更简洁、结构更干净，是前端开发中非常实用的小技巧。