使用伪元素可高效添加装饰效果。1. 通过::before和::after插入图标增强文本表现力；2. 结合定位与动画创建悬浮下划线提升交互反馈；3. 制作角标标签突出信息；4. 叠加纹理线条丰富视觉层次，减少DOM负担的同时实现灵活设计。
使用CSS选择器结合伪元素可以高效地为页面元素添加装饰效果，而无需额外的HTML标签。伪元素如 ::before 和 ::after 能在目标元素前后插入内容或装饰性图形，配合定位、变换等属性，实现丰富视觉效果。
1. 使用 ::before 和 ::after 添加装饰图标
通过伪元素插入装饰符号或形状，增强文本表现力。
例如，为列表项前添加小圆点或图标：
li::before {
content: "•";
color: #ff6b6b;
font-weight: bold;
margin-right: 8px;
}
也可以用Unicode字符或字体图标：
.alert::before {
content: "⚠";
margin-right: 4px;
}
2. 创建悬浮装饰边框或下划线
利用伪元素制作动态边框，提升交互反馈。
示例：鼠标悬停时从中心展开的下划线：
a {
position: relative;
text-decoration: none;
color: #000;
}
a::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background-color: #007acc;
transition: width 0.3s ease, left 0.3s ease;
}
a:hover::after {
width: 100%;
left: 0;
}
3. 制作角标或装饰标签
为图片或卡片添加“新”、“推荐”等标签，提升信息传达效率。
立即学习“前端免费学习笔记（深入）”；
示例：右上角红色角标：
.card {
position: relative;
border: 1px solid #ddd;
padding: 20px;
margin: 10px;
}
.card::after {
content: "NEW";
position: absolute;
top: -8px;
right: -8px;
background-color: #e74c3c;
color: white;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
transform: rotate(15deg);
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
4. 实现背景纹理或装饰线条
伪元素可用于叠加半透明图案或线条，丰富容器视觉层次。
例如，在盒子底部添加波浪线：
.decorative-section {
position: relative;
padding: 60px 20px;
}
.decorative-section::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: repeating-linear-gradient(
45deg,
#000,
#000 10px,
transparent 10px,
transparent 20px
);
opacity: 0.1;
}
基本上就这些。合理使用伪元素既能减少DOM负担，又能灵活实现各类装饰效果。关键是设置 content 属性并配合定位，再通过CSS样式控制外观和动画。注意不要滥用，确保不影响可访问性和页面性能。
