使用::after伪元素可灵活创建分割线，通过content配合定位与样式实现竖线、渐变线或装饰符号，如.item:not(:last-child)::after添加竖线，.section::after用渐变做柔和分隔，.divider::after插入圆点或Unicode字符装饰，提升视觉效果且无需额外标签。
使用 ::after 伪元素实现分割线装饰，是一种常见且灵活的css技巧。它可以在不增加额外html标签的情况下，为元素添加视觉上的分隔效果，比如在列表项、导航链接之间插入线条或装饰性图案。
基本原理
::after 伪元素用于在选定元素的内容之后插入生成的内容。通过设置 content 属性（即使为空），结合 display、position 和边框或背景样式，就能创建出各种分割线效果。
常见实现方式：横向分割线
适用于列表项之间添加竖线或横线分隔，以下是一个在行内元素后添加竖线的例子：
.item { position: relative; padding-right: 12px; display: inline; } <p>.item::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #ccc; }</p>
说明：每个 .item 后面生成一条垂直短线，用绝对定位控制位置，避免最后一个元素也显示分割线，可配合 :not(:last-child) 使用：
立即学习“前端免费学习笔记（深入）”；
.item:not(:last-child)::after { content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #ccc; }
使用边框模拟长分割线
如果想在段落或模块之间添加横贯的分隔线，可以用 ::after 模拟一条带装饰的线：
.section::after { content: ""; display: block; width: 80%; height: 1px; background: linear-gradient(90deg, transparent, #ddd, transparent); margin: 10px auto; }
这里使用渐变背景让线条两端淡出，视觉更柔和。也可以用 border-top 实现基础线：
.separator::after { content: ""; display: block; margin: 20px 0; border-top: 1px dashed #ccc; }
添加装饰性符号作为分隔
除了纯线条，还可以用字符或图标做装饰分隔，比如中间一个圆点或箭头：
.divider::after { content: "•"; display: block; text-align: center; font-size: 1.2em; color: #999; margin: 10px 0; }
或者使用Unicode符号：
/* 例如：» 或 ──●── */ .decorative::after { content: " ──●── "; color: #aaa; display: block; text-align: center; margin: 15px 0; } </font>
基本上就这些方法，关键是利用 content 触发伪元素，再通过布局和样式控制外观。注意不要给不需要的元素添加多余分割线，合理使用 :not(:last-child) 能提升细节体验。