::before和::after通过content属性在元素前后插入装饰性内容，常用于添加图标、清除浮动、创建气泡箭头等视觉效果，需配合content使用，生成可样式化的行内伪元素，实现结构与表现分离。
CSS伪元素::before和::after允许我们在一个元素的内容前或内容后插入装饰性内容，而无需修改HTML结构。它们常用于添加图标、修饰符号、清除浮动等场景，是实现视觉效果与内容分离的重要工具。
基本语法与使用条件
伪元素::before和::after必须配合content属性使用，否则不会生效。它们生成的是行内元素，可以设置宽高、背景、颜色等样式。
-
element::before { content: ""; }—— 在元素内容前插入内容 -
element::after { content: ""; }—— 在元素内容后插入内容
注意：单冒号:before是CSS2的写法，双冒号::before是CSS3为区分伪类和伪元素引入的，推荐使用双冒号以增强语义清晰度。
插入文本与特殊字符
通过content属性可以插入纯文本、引号、特殊符号甚至Unicode字符。
立即学习“前端免费学习笔记（深入）”；
示例：-
p::before { content: "提示："; color: red; }—— 每个段落前加“提示：” -
.icon::after { content: "\2713"; }—— 插入对勾符号（✓） -
q::before { content: open-quote; }—— 使用浏览器默认引号样式
使用Unicode时建议转义，避免编码问题，如<p>使用Unicode时建议转义，避免<a style="color:#f60; text-decoration:underline;" title="编码" href="https://www.php.cn/zt/16108.html" target="_blank">编码</a>问题，如<code>\00A9表示版权符号©。
创建装饰性图形
结合CSS盒模型和变换，可以用::before和::after绘制简单图形，减少图片依赖。
- 气泡对话框的三角箭头
- 按钮两侧的装饰点或线条
- 悬停时出现的光晕或边框动画
例如，制作一个带小三角的提示框：
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border: 5px solid transparent;
border-top-color: #000;
}
辅助布局与清除浮动
虽然现代布局多用Flexbox或Grid，但::after仍常用于清除浮动容器的高度塌陷问题。
.clearfix::after {
content: "";
display: block;
clear: both;
}
将该类应用于浮动子元素的父容器，可确保父元素正确包裹子元素。
基本上就这些。掌握::before和::after的关键是理解它们生成的是可样式化的虚拟节点，适合处理非结构性的视觉内容，不复杂但容易忽略细节。
