必须设置content属性，利用伪元素创建图形、清除浮动并提升可访问性，合理使用可减少冗余标签，增强样式灵活性。
在CSS中，::before 和 ::after 伪元素是强大的工具，可以为元素添加装饰性内容或结构，而无需修改HTML。它们通过生成虚拟的子元素，帮助开发者实现各种视觉效果。掌握使用技巧能提升代码简洁性和可维护性。
1. 必须设置content属性
使用 ::before 或 ::after 时，必须声明 content 属性，否则伪元素不会显示。即使内容为空，也需要写成 content: "";。
- 插入文字：content: "提示：";
- 添加图标（Unicode）：content: "\2713";
- 引用属性值：content: attr(data-tip);
- 配合计数器使用：content: counter(item);
2. 创建装饰性图形与形状
利用伪元素可以绘制小图标、箭头、圆点等装饰元素，避免额外标签。
- 用 border 和 transform 制作三角形箭头
- 结合 border-radius 画圆形或椭圆标记
- 实现“气泡对话框”效果：主元素为方块，::after 生成小三角
常见场景如菜单项前的小圆点、引用区块的引号图标等，都可通过伪元素实现。
立即学习“前端免费学习笔记（深入）”；
3. 清除浮动与布局辅助
虽然现代布局多用Flexbox或Grid，但在某些情况下，伪元素仍可用于清除浮动。
Yes!SUN企业网站系统 3.5 Build 20100303
下载
Yes!Sun基于PHP+MYSQL技术，体积小巧、应用灵活、功能强大，是一款为企业网站量身打造的WEB系统。其创新的设计理念，为企业网的开发设计及使用带来了全新的体验：支持前沿技术：动态缓存、伪静态、静态生成、友好URL、SEO设置等提升网站性能、用户体验、搜索引擎友好度的技术均为Yes!Sun所支持。易于二次开发：采用独创的平台化理念，按需定制项目中的各种元素，如：产品属性、产品相册、新闻列表
- 给容器添加 ::after { content: ""; display: block; clear: both; }
- 避免父元素塌陷，无需额外空标签
这种方式比在HTML中加 更干净。
4. 提升可访问性与语义化
伪元素插入的内容属于“装饰性”，不会被屏幕阅读器读取，因此不能用于关键信息展示。
- 适合添加视觉引导符号，如 »、• 等
- 避免用 ::before 插入重要提示文本
- 若需语义内容，应写在HTML中
保持内容与表现分离原则，确保信息对所有用户可达。
基本上就这些。合理使用 ::before 和 ::after 能让样式更灵活，减少冗余标签，但要注意性能和语义边界。不复杂但容易忽略。
