直接用 border 比 ::after 更稳妥，除非需伪元素的独立定位、遮罩或错位能力；::after 分割线在小屏下常断掉或偏移，主因是父容器未撑起高度/宽度或缺失定位上下文。
直接用 border 比 ::after 更稳妥，除非你明确需要伪元素带来的独立定位、遮罩或错位能力——否则 90% 的响应式分割线场景，border-bottom 就够了。
为什么 ::after 分割线在小屏下常“断掉”或“偏移”
伪元素不显形或错位，八成是因为父容器没撑起可计算的高度/宽度，或者定位上下文缺失。常见现象包括：开发者工具里能看到 ::after 节点，但页面上空白；媒体查询生效后线变短、消失、或跑到屏幕外。
-
::after的width: 100%或height: 100%是相对父容器计算的——若父容器高度靠内容撑开，而子项用了position: absolute或display: flex导致脱离文档流，高度就塌陷为 0 - 父容器没设
position: relative，::after会相对于body定位，一缩放就飘走 - 移动端高 DPR（如 dpr=2）下，
height: 1px渲染为 2 物理像素，线变粗；用transform: scaleY(0.5)替代更稳
::after 画横线时，flex 布局比 width 更可靠
用 width: 40px 控制横线长度，在缩放、不同字体或响应式切换时极易错位。真正健壮的做法是让伪元素参与布局计算。
- 文字容器（如
h2）设display: inline-flex; align-items: center; -
h2::before, h2::after设content: ""+flex: 1+border-top: 1px solid #ccc - 文字本身用
span包裹，并加margin: 0 16px避免贴边 - IE11 不支持
inline-flex中伪元素的flex行为，需降级为display: table+table-cell
画竖线时，:not(:last-child) 比 :last-child 隐藏更安全
别写 .item:last-child::after { display: none; }——这会触发重绘，且在动态插入/删除列表项时失效。
- 正确做法是限定作用范围：
.item:not(:last-child)::after，确保伪元素只生成在非末尾项后 - 必须写
content: ""，否则盒模型不创建，再怎么设background或border都无效 - 竖线居中推荐用
top: 0; bottom: 0; right: -1px;（右对齐微调），比left: 100%或right: 0更可控 - 若父容器有
overflow: hidden，伪元素可能被裁掉——这是调试时最常忽略的两点之一（另一点就是漏写content: ""）
实际项目里，伪元素分割线的坑不在写法多难，而在它太“隐形”：没 content 不渲染，没 position: relative 就乱跑，被 overflow: hidden 裁掉还查不到原因。先用 border: 1px solid red 确认位置和尺寸，再换颜色或动画，省一半调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
