使用CSS伪元素与选择器结合可创建轻量装饰效果。1. 通过::before和::after为元素添加波浪线、图标等视觉元素；2. 利用属性选择器为外部链接自动添加上标箭头；3. 使用:nth-child与计数器实现自定义序号列表；4. 配合:hover实现按钮悬停动画，如下划线展开。这些方法减少HTML标签依赖，提升设计灵活性与交互体验。
使用CSS选择器与伪元素结合，可以创建丰富且轻量的装饰效果，无需额外HTML标签。伪元素如 ::before 和 ::after 能在元素前后插入内容并样式化，配合精准的选择器，实现灵活的视觉设计。
1. 使用 ::before 和 ::after 添加装饰性形状
通过定位和基础样式，可以用伪元素生成圆形、线条、三角形等装饰。
示例：为标题添加底部波浪线 ```css h2 { position: relative; padding-bottom: 10px; }h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; background: linear-gradient(90deg, #ff7a00, #ff0080); border-radius: 2px; }
<p>这样每个 h2 标题下方都会自动出现一条渐变装饰条。</p>
<H3>2. 结合属性选择器定制不同图标</H3>
<p>利用属性选择器匹配特定类或属性，为不同元素添加个性化装饰。</p>
<font color="#555">示例：为外部链接添加小图标</font>
```css
a[href^="http"]:not([href*="yoursite.com"])::after {
content: " ↗";
font-size: 0.8em;
color: #0066cc;
margin-left: 4px;
}所有指向站外的链接会自动显示一个上标箭头，提示用户将跳转。
3. 利用 :nth-child 为列表添加序号或装饰点
结合计数器与伪元素，可为有序列表创建自定义编号样式。
立即学习“前端免费学习笔记（深入）”；
```css ol { counter-reset: step-counter; list-style: none; }ol li { counter-increment: step-counter; margin-bottom: 12px; position: relative; padding-left: 30px; }
ol li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: #0055aa; color: white; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.8em; }
<p>每项前面出现圆形数字徽章，增强步骤感和视觉引导。</p>
<H3>4. 悬停状态下的动态装饰效果</H3>
<p>伪元素配合:hover可实现动画装饰，比如下划线滑动、背景扩展等。</p>
```css
.button {
position: relative;
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: #333;
transition: color 0.3s;
}
.button::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #ff3e00;
transition: width 0.3s ease;
}
.button:hover::after {
width: 100%;
}鼠标悬停时，底部红线从左向右展开，提升交互质感。
基本上就这些。合理使用选择器与伪元素，既能减少DOM负担，又能实现多样化的装饰效果。关键在于控制 content、定位和过渡的协调。
