应统一用::after给除最后一项外的所有添加分隔符最稳妥，配合:not(:last-child)限定范围，避免末尾冗余；content优先用unicode如"\203a"，并设vertical-align: middle对齐。
伪元素用 ::before 还是 ::after 放分隔符？
面包屑分隔符（如 / 或 >）必须插在相邻两项之间，不能出现在开头或结尾。所以统一用 ::after 给除最后一项外的所有 <li> 添加分隔符最稳妥——这样逻辑清晰，无需额外判断索引。
常见错误是给所有 <li> 都加 ::after，结果末尾多出一个冗余符号。正确做法是配合 :not(:last-child) 限定范围：
nav ol li:not(:last-child)::after {
content: "/";
margin: 0 0.5em;
}
content 属性里写字符串、图标还是 Unicode？
直接写字符串（如 content: "/";）最简单，但可访问性差、缩放不一致；用 Unicode（如 content: "\203A"; 表示右向双角括号）更轻量且兼容性好；用 SVG 或字体图标需额外处理尺寸和垂直对齐，反而增加复杂度。
推荐优先用 Unicode，例如：
-
"\003E"→ >（大于号，兼容性最好） -
"\203A"→ ›（右双角引号，视觉更柔和） -
"\276F"→ ❯（粗体三角，适合现代 UI）
避免写 content: url(...) 加载图片分隔符——它会触发额外 HTTP 请求，且无法随文字大小缩放。
为什么分隔符经常上下偏移、对不齐文字？
伪元素默认是 display: inline，基线（baseline）对齐方式和文字不同，导致视觉错位。关键要重置 vertical-align 和行高：
- 加
vertical-align: middle;或vertical-align: -0.125em;（微调常用值） - 确保父
<li>有明确的line-height，否则伪元素高度不可控 - 慎用
position: absolute定位分隔符——它会脱离文档流，影响后续项的margin计算
一个稳定写法：
nav ol li:not(:last-child)::after {
content: "\203A";
margin: 0 0.4em;
vertical-align: 0.1em;
}
响应式下怎么让分隔符自动隐藏或替换？
小屏幕时分隔符占空间又无必要，可用媒体查询直接清空 content：
@media (max-width: 480px) {
nav ol li:not(:last-child)::after {
content: "";
}
}
如果想换成换行（竖排变横排），不要改 content，而是用 display: block + margin 控制间距，否则会破坏语义结构。另外注意：某些旧版 Safari 对 ::after 在 <ol></ol> 子项中渲染不稳定，若遇异常，可将 <li> 改为 display: inline-block 触发 BFC。
真正容易被忽略的是可访问性：屏幕阅读器默认会读出 content 字符串，所以用 aria-hidden="true" 包裹整个导航，或确保分隔符不干扰语义层级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
