伪元素画线不连续主因是父容器overflow:hidden截断或inline间隙导致定位偏移；建议用flex布局消除间隙，absolute+right定位，border-left画线。
伪元素画线时为什么连接不连续
用 ::before 或 ::after 在面包屑项之间画线，最常踩的坑是父容器设置了 overflow: hidden（比如为了圆角裁剪），导致伪元素超出部分被截断。另一个原因是相邻项之间存在默认的 inline 元素间隙（空格、换行符），让伪元素定位偏移，线头对不上。
实操建议：
- 把面包屑容器设为
display: flex，彻底消除 inline 间隙，比用font-size: 0或注释删空格更可靠 - 伪元素用
position: absolute+right: -1rem（而非left: 100%）向右延伸，避免受父级text-align干扰 - 线宽统一用
border-left而非width + background，抗缩放更稳
进度态怎么用 CSS 控制已访问/未访问样式
面包屑进度不是靠 JS 实时改 class，而是用语义化结构配合属性选择器——比如给已完成步骤加 data-status="done"，当前步用 data-status="current"，后续步留空或设 "pending"。
关键点：
-
[data-status="done"]::after画实心圆点，[data-status="current"]::after画环形圆点，:not([data-status])::after画空心轮廓（注意顺序，避免被覆盖） - 连接线只在
[data-status="done"]后画，用[data-status="done"] + li::before选中下一个兄弟节点，再用伪元素画线 - 禁用状态（如不可点击的后续步骤）用
pointer-events: none; opacity: .5，别只靠颜色区分
响应式断点下连接线如何自适应折行
Flex 布局默认会折行，但伪元素画的线不会自动“拐弯”。强行让线跟着折行，不如换思路：在移动端直接隐藏连接线，改用箭头符号（→）或垂直堆叠+小圆点分隔。
推荐写法：
- 默认启用连接线：
.breadcrumb { display: flex; flex-wrap: wrap; } - 小屏关闭线、启用手势友好间距：
@media (max-width: 480px) { .breadcrumb-item::after { content: "→"; margin: 0 .5rem; } .breadcrumb-item + .breadcrumb-item::before { display: none; } } - 如果坚持要线，可用
background: linear-gradient(...)铺满整个容器底部，再配合background-position动态调整起点，但维护成本高，一般不值得
IE11 下伪元素连接线错位怎么办
IE11 对 flex + position: absolute 的组合支持差，尤其当父容器是 flex 且子项用了 align-items: center 时，::before 的 top: 50% 计算会失准。
兼容方案：
- 放弃绝对定位，改用
border-right直接画在每个完成项上（[data-status="done"] { border-right: 1px solid #ccc; padding-right: 1rem; }），视觉效果一致，且 IE 完全支持 - 若必须用伪元素，把定位基准从
top: 50%改成top: 0.6em（基于 font-size 的固定值），并确保父级line-height显式声明 - 所有
transform: translateY(-50%)替换为margin-top: -0.3em，绕过 IE 的 transform 渲染 bug
实际做下来，最难的不是画线，而是让“已完成”“当前”“待办”的状态切换不闪、不跳、不重绘整条链——这要求所有尺寸单位尽量用 em 或 rem，避免混合使用 px 和 % 导致小数像素渲染抖动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
