::before和::after通过content属性为元素添加装饰性内容，常用于引号、三角提示框、分隔符等视觉效果，无需修改HTML结构，结合定位与样式实现丰富布局。
使用 ::before 和 ::after 伪元素可以在不修改HTML结构的前提下，为元素添加装饰性内容。它们通过CSS生成内容，常用于图标、引号、分隔线、悬停效果等视觉增强。
基本语法与content属性
要使用 ::before 或 ::after，必须定义 content 属性，即使为空字符串也能生效。content 可以是文字、特殊符号、计数器或空值。
常见写法：-
content: "";—— 创建一个空内容，常用于图形装饰 -
content: "★";—— 插入星号作为装饰 -
content: attr(data-label);—— 动态插入自定义属性值
制作引号装饰
常用于引用文本的前后添加引号，提升可读性。
.quote {
position: relative;
padding: 10px 20px;
}
.quote::before {
content: "“";
font-size: 2em;
color: #999;
position: absolute;
top: 0;
left: 0;
}
.quote::after {
content: "”";
font-size: 2em;
color: #999;
position: absolute;
bottom: 0;
right: 0;
}创建小三角提示框
用 ::before 或 ::after 绘制三角形，模拟气泡对话框或标签角标。
立即学习“前端免费学习笔记（深入）”；
.tooltip {
position: relative;
background: #007bff;
color: white;
padding: 10px;
display: inline-block;
}
.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
border-top-color: #007bff; /* 形成向上的三角 */
}添加分隔符或装饰点
在导航菜单或列表项之间插入小图标或线条。
.breadcrumb li:not(:last-child)::after {
content: "›";
margin: 0 8px;
color: #ccc;
}这样每个非末尾的列表项后都会自动出现分隔符，无需手动添加HTML符号。
基本上就这些。只要合理使用定位、尺寸和边框，::before 和 ::after 能实现丰富的视觉装饰，而且不影响语义结构。注意设置 position 和层级（z-index）避免遮挡内容，同时保持可访问性。不复杂但容易忽略。
