因为::before默认是inline元素且基线对齐，导致分隔符下沉、与文字挤在一起；应设display:inline-block、vertical-align:middle，并用em单位和line-height:1适配不同字号与行高。
为什么直接用 ::before 添加分隔符会错位？
因为默认情况下，::before 生成的内容是行内级、无盒模型尺寸控制的，且不会自动撑开父容器高度或对齐文本基线。常见现象是分隔符上下偏移、与文字不对齐、甚至被截断。
关键解决点：必须显式设置 display 并控制垂直对齐方式。
- 给
::before加display: inline-block或display: flex，才能设宽高、行高、对齐 - 用
vertical-align: middle对齐文字（不是baseline） - 避免依赖默认字体大小——显式设
font-size或用em相对单位
如何让分隔符适配不同字号和行高的面包屑项？
硬写像素值（如 font-size: 12px）会导致缩放或响应式时错位。真正可靠的方式是用相对单位 + 继承父级排版上下文。
推荐写法：
.breadcrumb-item:not(:first-child)::before {
content: "/";
display: inline-block;
vertical-align: middle;
margin: 0 0.5em;
font-size: 0.875em; /* 跟父元素 font-size 挂钩 */
line-height: 1; /* 避免额外行高干扰 */
}
-
margin用em而非px，随字号缩放 -
line-height: 1防止分隔符因行高过大而“浮高” - 如果父级用了
flex布局，vertical-align失效，改用align-items: center控制整体对齐
用图标字体或 SVG 替代斜杠时要注意什么？
用 content: ""（图标字体）或 content: "" + background-image 是常见做法，但容易出兼容性和渲染问题。
- 图标字体需确保
font-family正确继承，且font-weight匹配图标定义 - SVG 作为背景图时，
background-size必须设为具体值（如0.75em 0.75em），否则可能拉伸或模糊 - 若用
mask-image或clip-path嵌入 SVG，注意 Safari 对mask的支持限制（iOS 15.4+ 才稳定） - 纯色分隔符更稳妥：用
content: ""+border-left或box-shadow模拟竖线，规避字体/图像加载失败风险
响应式下隐藏中间分隔符的陷阱
想在小屏隐藏除首尾外的分隔符？别直接 display: none 在 ::before 上——它不触发重排，但会破坏兄弟选择器逻辑（比如 :not(:first-child) 仍生效）。
- 正确做法：用
content: ""覆盖原内容，而不是删掉伪元素 - 或者换思路——把分隔符抽成独立 DOM 元素（如
<span class="sep">/</span>），CSS 控制更可控 - 媒体查询中修改
margin比修改content更轻量，也更利于无障碍读取（屏幕阅读器可能忽略空content）
伪元素看着轻量，但一旦涉及对齐、缩放、响应式和可访问性，就得一层层验算它的盒模型行为。最易被忽略的是：它没有真实 DOM 节点，所以无法用 JS 监听或动态替换，也不参与 tab 键导航顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
