用::after伪元素替代border-bottom实现隔项分割线更精准可控——仅对非末项添加，支持虚线/点线、响应式缩进及高清屏适配，避免末项多余线条与错位问题。
卡片列表中隔项加分割线，用传统 border-bottom 容易在最后一项多画一条线，或因 margin/padding 错位导致虚线对不齐。用 ::after 伪元素控制更精准——它只作用于指定项，位置、长度、样式完全自主。
只在非末尾项后加线：用 :not(:last-child)
避免最后一项误加线，核心是限定作用范围：
- 给卡片容器设
position: relative - 卡片本身设
position: relative（为 ::after 定位提供参照） - 用
.card:not(:last-child)::after精准选中除最后一项外的所有卡片
示例 CSS：
.card:not(:last-child)::after {content: "";
position: absolute;
bottom: 0;
left: 16px;
width: calc(100% - 32px);
height: 1px;
background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
pointer-events: none;
}
虚线/点线更灵活：用 background + gradient 或 repeating-linear-gradient
border 不好做等距虚线，但 background 可控性强：
- 用
repeating-linear-gradient实现标准虚线（如 4px 实+4px 空） - 用
linear-gradient搭配透明色，做出“中间实、两边淡出”的柔和分隔效果 - 高度设为 1px，再配合 transform: scaleY(0.5) 可适配高清屏，避免发虚
虚线写法示例：
...
background: repeating-linear-gradient(
90deg,
#e0e0e0,
#e0e0e0 4px,
transparent 4px,
transparent 8px
);
}
响应式微调：用 calc() 动态缩进，避开内边距干扰
卡片左右有 padding 时，分割线若从 left: 0 开始会顶到边缘。用 calc() 自动避让：
-
left: calc(1rem)对应 padding-left -
width: calc(100% - 2rem)确保线不超宽 - 媒体查询里可单独调整移动端的 left/width，比如改成
left: 12px; width: calc(100% - 24px)
兼容与性能提醒
::after 渲染轻量，无重排，但注意两点：
- 确保父容器有
position: relative，否则 absolute 定位会相对于最近定位祖先，容易错位 - 旧版 Safari 对 repeating-linear-gradient 支持弱，可降级为单色细线 + opacity: 0.6
- 避免在 ::after 里写复杂动画，纯装饰性线条保持静态即可
基本上就这些。用 ::after 替代 border-bottom，不是绕路，而是把控制权真正拿回来——线在哪、多长、多虚、是否避让，全由你定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
