因为::before默认inline且基线对齐异常，末项也会渲染导致多斜杠；应改用li:not(:last-child)::before加content:"/"、margin和vertical-align:middle精准控制。
为什么直接用 ::before 给面包屑加斜杠会错位？
因为 ::before 默认是 inline 元素，且不占据文档流中的实际空间，一旦父容器（比如 <li>）没有设置 position: relative，或者没控制好 vertical-align，分隔符就容易和文字上下不对齐。更常见的是：最后一个 <li> 也渲染了分隔符，导致末尾多出一个斜杠。
给每个 <li> 添加分隔符但排除最后一个
最稳妥的做法是统一给所有 <li> 设置 ::before，再用 :not(:last-child) 过滤掉末项。注意必须把分隔符设为 content: "/"，并显式设置 display: inline-block 或 inline 配合 vertical-align: middle 对齐文字。
示例 CSS：
nav.breadcrumb li {
display: inline;
}
nav.breadcrumb li:not(:last-child)::before {
content: "/";
margin: 0 0.5em;
display: inline-block;
vertical-align: middle;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
margin比padding更安全——避免影响父元素宽度计算 - 不要依赖
position: absolute做分隔符，它容易脱离对齐上下文 - 如果文字用了
line-height，vertical-align: middle可能仍偏高，此时改用vertical-align: text-bottom或微调margin-top
用 ::after 替代 ::before 的适用场景
当分隔符需要紧跟在文字右侧、且文字本身有内边距或背景时，::after 更易控制间距。但逻辑不变：仍要配合 :not(:last-child)，否则末尾多斜杠。
常见误操作：
- 写成
li::after { content: "/" }却没加:not(:last-child)→ 末尾出现多余斜杠 - 在
<a></a>上直接用伪元素，而没重置a::after的display→ 分隔符换行或撑开高度 - 用
font-size: 0技巧隐藏空格却忘了重置伪元素的字号 → 斜杠不可见
响应式下分隔符缩略或替换的处理方式
小屏幕中斜杠可能挤占空间，可用媒体查询切换为省略号或移除。注意不能只靠 display: none，否则语义结构被破坏；推荐用 content: "" 清空，保留可访问性。
示例：
@media (max-width: 480px) {
nav.breadcrumb li:not(:last-child)::before {
content: "";
}
nav.breadcrumb li:nth-child(n+2):not(:last-child)::before {
content: "•";
}
}
这里第二个规则是备用方案：当想保留分隔视觉但简化符号时，用圆点替代斜杠。重点在于：content 必须显式重写，不能只靠继承或初始值。
真正难的不是加斜杠，而是确保它不干扰点击区域、不破坏屏幕阅读器读取顺序、在各种字体大小下都稳稳贴着文字基线——这些细节往往被忽略，直到上线后被用户截图反馈位置飘了。
