::before 和 ::after 伪元素通过设置 content 属性为元素添加装饰性内容，常用于生成引号、图标、小三角等视觉效果。1. 必须定义 content 才能生效，可为空字符串；2. 可结合 border、定位等属性创建几何图形或气泡提示框；3. 常见应用包括 blockquote 引号自动添加、按钮箭头、tooltip 气泡提示；4. 利用 attr() 调用 HTML 属性值提升可维护性；5. 应避免插入关键文本以保障可访问性和SEO。
在CSS中，::before 和 ::after 伪元素可以为选中的元素添加装饰性内容，而无需修改HTML结构。它们常用于添加图标、引号、分隔符、小三角等视觉效果，提升页面表现力。
基本语法与使用条件
要使用 ::before 或 ::after，必须设置 content 属性，即使为空字符串（""）也要存在，否则伪元素不会显示。
常见写法：- element::before { content: ""; }
- element::after { content: ""; }
content 可以是文字、特殊符号、计数器，甚至图片引用。
添加前后引号或装饰文本
常用于引用类内容，比如 blockquote 或 q 标签。
示例：给引号自动添加双引号
blockquote::before {
content: "“";
color: #666;
}
blockquote::after {
content: "”";
color: #666;
}
这样每个 blockquote 前后都会自动加上引号，保持语义清晰。
创建几何图形或小图标
结合 border、width、height 等属性，可以用伪元素生成小三角、圆点、箭头等。
.button::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid currentColor;
margin-left: 8px;
vertical-align: middle;
}
这个技巧常用于下拉按钮或导航菜单项的指示图标。
配合定位实现悬浮提示或气泡框
用 ::before 和 ::after 组合可以做出带小三角的提示框。
思路：- 主元素作为气泡背景（用 ::before）
- 另一个伪元素做三角（用 ::after）
- 通过绝对定位调整位置
.tooltip::before {
content: attr(data-tip);
position: absolute;
background: #333;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
}
.tooltip::after {
content: "";
position: absolute;
border: 5px solid transparent;
border-top-color: #333;
top: 100%;
left: 50%;
margin-left: -5px;
}
这里利用 data-tip 属性动态显示提示文字，增强可维护性。
基本上就这些。合理使用 ::before 和 ::after 能减少冗余标签，让样式更灵活。注意不要滥用 content 插入关键文本内容，以免影响可访问性和SEO。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
