应使用 li:not(:last-child)::after 添加斜杠，content: "/" 配合 margin-inline-start/end 实现语义清晰、响应式友好且无障碍友好的面包屑分隔。
面包屑中斜杠分隔符为什么不能直接写在 HTML 里
硬编码 / 到 HTML 中会导致结构语义污染——/ 是纯装饰性分隔，不属于导航层级信息。一旦需要换成分隔图标、调整间距或做响应式隐藏，就得改 HTML 或加额外 class，维护成本高。
用 ::after 生成分隔符，把表现层完全交给 CSS，HTML 只保留干净的语义结构（比如 <nav></nav> + <ol></ol> + <li>）。
怎样用 ::after 给除最后一项外的所有 <li> 添加斜杠
关键在选择器范围控制：必须只对非末项生效，否则末尾会多出一个多余斜杠。
- 推荐写法：
li:not(:last-child)::after—— 精准排除最后一个<li> - 避免写
li::after再用li:last-child::after { content: none; }，多一次渲染计算 -
content值建议用"/"而非"\2F"（Unicode），更直观且无转义风险
breadcrumb li:not(:last-child)::after {
content: "/";
margin: 0 0.5em;
color: #999;
}
斜杠和文字之间留白不均匀？注意 margin 和 display 的配合
::after 默认是 inline 元素，但若父元素 <li> 设了 display: flex 或 display: grid，可能影响 margin 行为；更常见的是字体度量导致视觉错位。
- 用
margin-inline-start/margin-inline-end替代margin-left/margin-right，适配 RTL 语言 - 如果斜杠上下偏移，加
vertical-align: middle对齐基线 - 避免给
::after设display: block，否则会换行破坏布局
要不要支持点击跳转的斜杠？别用 ::after 模拟可交互元素
::after 生成的内容无法绑定事件、不能被聚焦、不进 tab 顺序——它只是视觉层补丁。
- 如果设计稿中斜杠本身是可点击的（比如返回上一级），必须用真实 HTML 元素（如
@#@#@#@#@#@#@#@#@#@0） - 此时 CSS 分隔逻辑要让位于语义，
::after只适合静态分隔场景 - 无障碍方面：
aria-hidden="true"可加在伪元素父容器上，防止屏幕阅读器误读斜杠
真正容易被忽略的是字体渲染差异：不同系统下 "/" 的字重、高度、字间距可能微调，上线前最好在 Windows/macOS/iOS 多端点验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
