::after伪元素画斜杠箭头最轻量，首选Unicode“›”+vertical-align:middle+line-height:1；背景图方案需padding-right留白和background-size控制；IE11需inline-block或position:relative；移动端应扩展热区而非仅靠padding。
用 ::after 伪元素画斜杠箭头最轻量
纯 CSS 实现面包屑箭头，::after 是首选——不增加 DOM、不依赖图片、缩放和颜色都好控制。关键不是“怎么加”，而是“怎么对齐不跑偏”。
常见错误是直接写 content: ">" 或 "→"，结果在不同字体下宽度不一、基线错位、中英文混排时跳动。真正稳的方式是用 SVG 路径转义或 Unicode 箭头 + 显式垂直对齐：
-
content: "›";（U+203A，比 > 更窄、更居中） - 必须加
vertical-align: middle;和line-height: 1;防止上下浮动 - 父容器设
font-variant-numeric: tabular-nums;可避免数字宽度干扰对齐
nav .crumb:not(:last-child)::after {
content: "›";
margin: 0 0.5em;
vertical-align: middle;
line-height: 1;
}
背景图右侧填充要防文字换行压住箭头
用 background-image 在每个 .crumb 右侧画斜杠，本质是利用 background-position: right center + background-repeat: no-repeat。但问题出在响应式场景下：文字变长、容器变窄，background 不会自动躲让，容易被折行文字盖住。
解决核心是「留白」和「裁剪」：
立即学习“前端免费学习笔记（深入）”；
- 给
.crumb设固定padding-right: 1.5em;，确保背景区域始终有空间 - 用
background-size: 6px 6px;控制箭头大小，避免随字体缩放失真 - 如果用 base64 SVG，记得 URL 中的
/和+要编码，否则 IE/旧 Safari 会解析失败
.crumb {
padding-right: 1.5em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M1 1l4 4M1 5l4-4' stroke='%23666' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right center / 6px 6px;
}
IE11 下 ::after 伪元素不显示箭头？检查 display 和 position
IE11 对伪元素的支持有个隐藏条件：父元素若为 display: inline（比如默认的 <a>），且没设 position: relative，::after 的 vertical-align 会失效，甚至整个伪元素不渲染。
这不是 bug，是 IE 对 inline 元素盒模型的严格处理。绕过方式很直接：
- 把
.crumb改成display: inline-block; - 或者强制加
position: relative;（哪怕不设 top/left） - 避免在 IE 中用
content插入复杂 SVG 字符串，优先用简单 Unicode
移动端点击热区太小，别只靠 padding 扩展
面包屑里 <a> 标签默认只有文字高度可点，手指点不准。很多人加 padding，但会导致箭头位置偏移、视觉拥挤。更干净的做法是把点击区域和视觉分离：
- 保持文字
padding不变，用::before伪元素覆盖全宽高，设pointer-events: none;让它不挡交互 - 给
<a>加height: 2em;+line-height: 2em;拉高热区 - 在 touch 设备上，额外加
min-height: 44px;符合苹果人机指南
padding 或 width 的方案都会在某个断点崩掉——这时候伪元素才是唯一能自适应的解法。 
