优先选 / 并统一加 aria-hidden="true"，用 ::before 伪元素实现，设 font-size: 0.8em 和 color: currentColor，配合 flex 布局与 white-space: nowrap 防换行错位。
分隔符用 / 还是 >？先看语义和可访问性
屏幕阅读器会逐字读出 /（“slash”），但不会自动识别为“层级分隔”，而 > 同样会被读作“greater than”。真正影响可访问性的不是符号本身，而是是否包裹在 aria-label 或 aria-hidden="true" 中。如果你用 / 且不隐藏，用户听到的是“首页 slash 关于我们 slash 联系方式”，这其实比“首页 greater than 关于我们 greater than 联系方式”更易懂——所以优先选 /，并统一加 aria-hidden="true" 避免冗余播报。
- 别用纯背景图或伪元素内容模拟分隔符，否则无法被辅助技术感知
- 如果必须用图标（如 SVG），确保设置
aria-hidden="true"并给父<li>设置合适的aria-current - 避免在分隔符上加
tabindex或点击事件——它不是交互元素
用 ::before 伪元素实现分隔符，但注意顺序和定位
最常用的方式是给面包屑列表项（除第一个）加 ::before，插入分隔符。关键点在于：伪元素默认是 inline 级，若父元素是 display: flex，它会参与对齐；若父元素是 display: inline-block，需手动调整 vertical-align。
- 推荐把
<ol>设为display: flex，每个<li>设为display: flex，再用::before插入/，这样能统一控制间距和对齐 - 不要用
position: absolute把分隔符硬塞进左边距——会导致响应式错位，且与文字基线脱节 - 字体大小建议设为
0.8em，颜色用currentColor继承文字色，避免维护多套颜色
nav ol {
display: flex;
list-style: none;
padding: 0;
}
nav li:not(:first-child)::before {
content: "/";
margin: 0 0.75rem;
color: currentColor;
font-size: 0.8em;
aria-hidden: "true";
}
响应式断行时，分隔符卡在行首怎么办？
当面包屑过长换行，常见问题是第二个 <li> 的分隔符（::before）跑到新行开头，看起来像 “/ 关于我们” —— 这是因为伪元素是 inline 内容，受 white-space 和换行规则影响。
- 给
nav ol加flex-wrap: wrap，同时给每个<li>加white-space: nowrap，强制“文字 + 分隔符”整体不折行 - 如果仍需允许折行（比如移动端极窄屏），改用
display: inline-flex替代flex，再配合flex-shrink: 0锁定项宽 - 绝对不要用
word-break: keep-all，它会破坏中英文混排的断行逻辑
用 CSS 变量统一管理分隔符样式，但别滥用
分隔符的字符、间距、颜色、尺寸常需全局一致，适合用 CSS 变量控制。但变量名要具体——比如 --breadcrumb-separator 比 --sep 更安全，避免被其他组件意外覆盖。
立即学习“前端免费学习笔记（深入）”；
- 定义在
:root里：--breadcrumb-separator: "/"; --breadcrumb-separator-spacing: 0.75rem; - 在伪元素中引用：
content: var(--breadcrumb-separator); margin-inline: var(--breadcrumb-separator-spacing); - 避免把分隔符字符设为
""空字符串再靠 JS 注入——CSS 就该管样式，字符语义属于 HTML 结构层
真正容易被忽略的是：当面包屑最后一项是当前页时，它后面不该出现分隔符。这个逻辑必须由 HTML 结构体现（比如最后一项不加 ::before），而不是靠 JS 动态删样式——否则 SSR 或爬虫看到的结构就不一致。
