不用<hr>而选::after伪元素，因<hr>是语义化分隔符，适用于文档结构级分割，而内容区内视觉分割线多为装饰性需求；::after更轻量、灵活且不干扰语义与可访问性。
为什么不用 <hr> 而选 ::after 伪元素
因为 <hr> 是语义化分隔符，适合文档结构级分割（如章节之间），而内容区内的视觉分割线往往只是装饰性需求——比如卡片底部、标题下方、列表项之间。硬塞一个 <hr> 会污染语义、增加 DOM 节点、干扰可访问性（屏幕阅读器可能误读），且样式控制不如伪元素灵活。
::after 绘制分割线的基本写法
核心是给目标元素添加 position: relative，再用 ::after 绝对定位画线。关键点在于避免影响布局流，同时保持响应能力：
- 必须设置
content: ""，否则伪元素不渲染 - 推荐用
border-bottom或background实现线条，比height + background更轻量 - 若用于标题下方，注意
margin-bottom和伪元素bottom的配合，防止重叠或留白异常
.title-with-line {
position: relative;
padding-bottom: 16px;
}
.title-with-line::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid #e0e0e0;
}
常见场景与适配要点
不同位置的分割线对定位和尺寸要求不同，容易出错的地方集中在“线没显示”或“位置偏移”：
- 标题下方：用
bottom: 0+padding-bottom控制间距，别用margin-bottom后再设bottom: -1px，易受父容器overflow: hidden截断 - 卡片底部：若卡片有
border-radius，线要避开圆角，可改用background: linear-gradient(...)拉一条渐变线，或用inset阴影模拟 - 列表项之间：对
li使用::after时，确保父ul没有list-style-position: inside，否则伪元素可能被缩进挤偏 - 响应式断点：线宽建议用
1px，但高清屏下会发虚，可用transform: scaleY(0.5)配合transform-origin: top做物理像素对齐
性能与兼容性提醒
伪元素本身开销极低，但要注意两个隐蔽成本：
立即学习“前端免费学习笔记（深入）”；
- 如果大量使用（如每行列表都加
::after分割线），且用了box-shadow或filter，可能触发层合成，滚动时掉帧 -
border-bottom在 Safari 旧版本（transform，可能出现模糊或错位，此时换用background-image: linear-gradient(#e0e0e0, #e0e0e0)更稳 - IE11 支持
::after，但不支持content中的某些值（如content: "•"在部分字体下会失效），纯装饰线建议只用空字符串 + 边框/背景
真正麻烦的不是写法，而是当设计师给了一条带渐变、阴影、两端留空的“高级分割线”时，得一层层拆解：先定锚点、再控长度、最后调质感——这时候，<hr> 真的连入场资格都没有。
