真正靠谱的面包屑分隔符方案是用 css 伪元素或 svg：::after 画箭头可保持 dom 干净、自由控制样式，内联 svg 解决高 dpi 模糊问题，aria-hidden="true" 的 span 兼容旧浏览器且保障可访问性。
直接用 > 或 / 做分隔符最简单，但默认没间距、无语义、响应式易错位——真正靠谱的做法是用 CSS 伪元素或 SVG 控制样式和可访问性。
用 ::after 伪元素画箭头，兼顾语义与样式
把箭头从 HTML 内容里剥离，交给 CSS 渲染，既保持 DOM 干净，又能自由控制颜色、大小、间距：
.breadcrumb-item:not(:last-child)::after {
content: ">";
margin: 0 8px;
color: #999;
font-weight: bold;
}
- 必须加
:not(:last-child)，否则末尾多一个箭头 -
margin比padding更安全：避免点击区域被撑开或影响对齐 - 别用
font-family: "Arial", sans-serif强制等宽字体——不同系统下>渲染宽度不一致，容易导致换行错位
用 SVG 替代字符箭头，解决缩放/高 DPI 显示问题
Retina 屏或缩放至 125% 时，> 字符边缘发虚、粗细不均；SVG 矢量路径始终清晰：
.breadcrumb-item:not(:last-child)::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l3 3-3 3' stroke='%23999' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
margin: 0 6px;
}
- 内联 SVG 用 URL 编码，避免引号嵌套冲突；
stroke颜色要 URL 编码（如%23999） - 设
display: inline-block才能生效width/height，纯content不支持尺寸控制 - 不用
<svg></svg>标签直接写进 HTML —— 会破坏列表结构语义，屏幕阅读器可能误读为独立元素
用 <span aria-hidden="true"></span> 插入字符箭头，兼容旧浏览器且语义明确
如果项目需支持 IE11 或团队禁用伪元素，把箭头保留在 HTML 中但声明其“非内容”：
<nav aria-label="面包屑导航"><ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">首页</a></li>
<li class="breadcrumb-item"><a href="/blog">博客</a></li>
<li class="breadcrumb-item"><a href="/blog/css">CSS 技巧</a></li>
</ol></nav>
然后在 JS 或 CSS 中动态插入（或服务端渲染时加）：
<span aria-hidden="true" class="breadcrumb-separator">></span>
-
aria-hidden="true"是关键：告诉辅助技术忽略它，不干扰导航逻辑 - 别用
role="presentation"替代——部分旧版 NVDA 对<span></span>上的 role 支持不稳定 - 所有分隔符统一用同一 class，方便后期批量替换为 SVG 或动画效果
真正难的不是画出箭头，而是让箭头在缩放、高对比度模式、语音导航、打印样式表里都保持可用——多数人只测了 Chrome 默认分辨率下的视觉效果，漏掉了这些边界场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
