用border模拟斜杠更可控，因字符受字体、行高、基线影响易错位且有无障碍问题；改用::after画45°细边框可精准定位、自动适配颜色、保障可访问性与响应式。
为什么直接用 ::after 加斜杠会错位
因为默认情况下 ::after 的内容是行内级，受父元素字体大小、行高、垂直对齐方式影响，斜杠 / 往往偏上或偏下，和文字基线不齐。更麻烦的是，不同字体里斜杠的视觉重心差异大（比如 system-ui 和 monospace），纯字符很难对齐。
- 别用
vertical-align: middle硬调——它对行内元素作用不稳定，尤其在 flex 布局里失效 - 避免设固定
line-height，否则响应式时文字缩放会破坏对齐 - 斜杠字符本身没有语义，屏幕阅读器会读出来，对无障碍不友好
用 border 模拟斜杠更可控
放弃字符，改用伪元素画一条 45° 倾斜的细边框，能完全脱离字体干扰，位置精准且无读屏问题。
.breadcrumb-item:not(:last-child)::after {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border-top: 2px solid #999;
border-right: 2px solid #999;
transform: rotate(45deg);
margin-left: 8px;
vertical-align: middle;
}
-
width和height要相等，否则旋转后不成正斜线 -
border宽度建议 ≤2px，太粗会显得笨重；颜色用#999这类中性灰，比纯黑更柔和 -
vertical-align: middle在这里有效，因为此时伪元素已是inline-block - 如果父容器用了
font-size: 0清除间隙，记得给伪元素单独设font-size防止尺寸塌缩
适配暗色模式和高对比度
硬编码颜色值在暗色模式下会失效。用 CSS 变量 + @media (prefers-color-scheme: dark) 是稳妥做法，但更轻量的方式是直接用 currentColor。
- 把
border-color改成currentColor，斜杠自动跟随文字颜色变化 - 若需在高对比度模式下强制显示，加
@media (forced-colors: active)并设forced-color-adjust: none - 不要依赖背景色反差来“隐藏”斜杠——有些用户禁用背景图或颜色，必须确保线条本身可见
移动端点击区域太小怎么办
斜杠本身不是可点击元素，但面包屑里的每项通常是链接。如果用户误点斜杠区域却没反应，体验会断层。
- 给
.breadcrumb-item设置padding-right: 8px，把点击热区向右延伸，覆盖斜杠位置 - 不要给
::after加pointer-events: none——它本就不响应事件，加了反而可能干扰父级事件冒泡 - 真要扩大热区，宁可用
margin-left: -4px微调伪元素位置，让视觉和交互区域自然重叠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
