Bootstrap面包屑默认分隔符是/，由CSS伪元素::before通过content属性注入；推荐用CSS变量--bs-breadcrumb-divider或覆盖.breadcrumb-item + .breadcrumb-item::before样式自定义，避免直接修改HTML。
怎么用 CSS 替换默认的 / 面包屑分隔符
HTML 本身不提供面包屑（breadcrumb）语义化标签，所谓“分隔符”其实是开发者手动写的文本或符号，比如 >、/ 或 »。想自定义它，核心不是改 HTML 结构，而是控制视觉呈现——用 CSS 隐藏原生分隔符，再用 ::before 或 ::after 插入图标或文字。
常见错误是直接在 HTML 里硬编码多个 /，导致无法统一替换、响应式错位、屏幕阅读器重复朗读。
- 推荐结构：每个层级用
<li>包裹，分隔符不写死，靠 CSS 生成 - 关键样式：
li:not(:last-child)::after { content: "›"; margin: 0 8px; } - 若要用 SVG 图标，
content支持url()，但需注意路径和尺寸，建议转为 inline SVG 更可控 - 务必加
aria-hidden="true"到伪元素生成的分隔符上，避免读屏软件误读
为什么不用 或空格做分隔间距
用 或多个空格强行撑开间距，看似简单，实则破坏可访问性和维护性。空格不可选、不可缩放、在高对比度模式下可能消失，且无法被 CSS 精确控制。
真实场景中，当用户放大字体或切换系统字体时，硬空格会导致分隔符与文字粘连或断裂。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用
margin控制间隔，例如margin-inline-start: 12px（兼容 RTL） - 避免
padding，它会扩大点击热区，对导航链路造成干扰 - 如果需要响应式间距，用
clamp(8px, 2vw, 16px)比媒体查询更轻量
aria-label 和 aria-current 怎么配合分隔符使用
分隔符本身不该有语义，但整个面包屑链路必须清晰传达层级关系。很多开发者只关注视觉，忽略辅助技术如何理解这个结构。
典型错误：给分隔符加 role="separator" —— 这反而会让读屏器重复播报“separator”，打断阅读流。
- 正确方式：在当前页的
<li>上加aria-current="page"，如<li aria-current="page">订单详情</li> - 整个
<nav>必须带aria-label="Breadcrumb"，否则读屏器无法识别这是导航路径 - 不要给伪元素生成的分隔符设任何 ARIA 属性，它们本就不该被聚焦或朗读
SVG 分隔符在 Safari 和旧 Edge 中的渲染差异
Safari 15.4 之前、Edge 18 及更早版本对伪元素中 content: url(...) 的 SVG 渲染支持不稳定：可能不显示、尺寸异常、或触发额外网络请求（即使 SVG 是 data URL）。
这不是 bug，而是这些浏览器对 CSS content 的资源加载策略限制所致。
- 稳妥方案：把 SVG 写成 inline，用
background-image: url("data:image/svg+xml,...")替代content - 或者直接用字体图标（如
font-family: "iconfont"+ Unicode 字符），兼容性更好 - 测试重点：不是看是否显示，而是检查是否触发了额外 HTTP 请求（DevTools → Network → Filter: img）
white-space: nowrap，如果父容器宽度不足，::after 仍可能被挤到下一行。这时候得配合 display: flex 和 flex-wrap: nowrap 才真正可靠。 
