::before和::after伪元素通过content属性在元素前后插入生成内容，常用于创建装饰性效果。1. 用于制作对话气泡框，::before生成内层三角，::after生成外边框三角，形成立体箭头；2. 构建复杂图形如书签，利用两个伪元素分别绘制顶部圆角和底部尖角；3. 清除浮动时，.clearfix::after配合display:table和clear:both解决高度塌陷问题。二者均需设置content，且默认为行内元素，可调整display类型。合理使用能增强视觉表现并保持html简洁，但应避免用于关键可访问性内容。
在css中，::before 和 ::after 伪元素是强大的工具，可以为元素添加装饰性内容或结构，而无需修改HTML。当它们组合使用时，能实现更丰富的视觉效果和布局控制。
基本语法与作用
::before 和 ::after 分别在元素内容前和内容后插入生成的内容。它们必须配合 content 属性使用，否则不会生效。这两个伪元素默认是行内元素，但可通过 display 属性调整。
常见写法：
- element::before { content: “”; }
- element::after { content: “”; }
创建对话气泡框
一个典型的应用是制作带三角箭头的提示框或聊天消息框。::before 和 ::after 可分别用于创建边框层和背景层的三角，避免阴影被遮挡。
示例代码：
.tooltip { position: relative; background: #007acc; color: white; padding: 10px; border-radius: 6px; } .tooltip::before { content: ""; position: absolute; top: 100%; left: 20px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #007acc; } .tooltip::after { content: ""; position: absolute; top: 100%; left: 20px; width: 0; height: 0; border: 12px solid transparent; border-top-color: #000; margin-top: -1px; }
这里 ::after 创建黑色外边框的三角，::before 创建蓝色内三角，形成有立体感的箭头。
立即学习“前端免费学习笔记（深入）”；
构建复杂图形
利用两个伪元素，可以在不增加dom的情况下绘制较复杂的图形，比如心形、书签或徽章。
例如制作一个书签形状：
- ::before 画顶部两个圆角
- 元素本身是矩形主体
- ::after 制作底部的尖角
通过定位和border-radius等属性，可拼接成完整图形。
清除浮动（传统用法）
虽然现代布局多用flex或Grid，但在旧项目中仍可见如下 clearfix 技巧：
.clearfix::after { content: ""; display: table; clear: both; }
将该类加在浮动容器上，可防止子元素浮动导致的高度塌陷。::before 有时也用于处理开头空白问题。
基本上就这些。合理组合 ::before 与 ::after，能提升样式表现力，同时保持HTML简洁。注意不要滥用，尤其避免用它们生成对可访问性关键的内容。