使用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、定位和过渡的协调。