:before和:after通过content属性为元素添加装饰性内容，如引号、图标、气泡箭头及交互效果，提升视觉表现与交互体验，且不改变HTML结构。
在CSS中，:before 和 :after 是两个常用的伪元素选择器，它们可以为选定的元素插入额外的内容或装饰性元素，而无需修改HTML结构。通过结合其他选择器使用，能实现丰富的视觉效果，比如添加图标、引号、分隔线、箭头等装饰性内容。
基本语法与content属性
:before 和 :after 必须配合 content 属性使用，否则不会生效。content 可以是文本、特殊符号、计数器，也可以为空字符串（用于插入纯样式装饰）。
例如：
.quote:before {
content: "“";
color: #999;
font-size: 2em;
}
.quote:after {
content: "”";
color: #999;
font-size: 2em;
}
这段代码会在类名为 quote 的元素前后插入左右引号，实现自动添加引用符号的效果。
立即学习“前端免费学习笔记（深入）”；
结合类选择器实现装饰性边框或图标
可以利用 :before 或 :after 创建装饰性图形，如小圆点、线条、图标背景等。
示例：为列表项前添加圆形装饰点
.list-item:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: #007acc;
border-radius: 50%;
margin-right: 10px;
vertical-align: middle;
}
这样每个带有 list-item 类的元素前都会出现一个蓝色小圆点，增强视觉层次，且不依赖图片或额外标签。
使用伪元素创建气泡对话框效果
结合定位和边框技巧，可以用 :after 制作指向性的三角形“小尾巴”，常用于提示框或聊天气泡。
示例：
.bubble {
position: relative;
background: #e1f5fe;
padding: 15px;
border-radius: 8px;
display: inline-block;
}
.bubble:after {
content: "";
position: absolute;
left: 20px;
bottom: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #e1f5fe;
}
这里 :after 生成了一个小三角形，作为气泡的底部箭头，使整体看起来像对话框。通过调整位置和边框颜色，可适配不同方向和主题。
结合:hover等状态选择器增强交互效果
伪元素也可参与动画和交互。例如，在鼠标悬停时显示隐藏的提示或图标。
示例：鼠标移上时显示分享图标
.share-button:after {
content: "?";
opacity: 0;
transition: opacity 0.3s;
}
.share-button:hover:after {
opacity: 1;
}
初始状态下链接符号不可见，悬停时淡入显示，提升界面简洁性与交互体验。
基本上就这些常见用法。合理使用 :before 和 :after 能有效减少冗余HTML标签，提升样式的可维护性和表现力，特别适合用于视觉装饰和微交互设计。注意避免用它们插入关键内容，因为伪元素内容不属于DOM，不利于可访问性和SEO。
