用 ::after 给面包屑中除最后一项外的 li 添加斜杠最规范，需配合 :not(:last-child) 排除末项，并设 display: inline-block 与 content: " / "，兼顾可访问性、响应式及 Flex 兼容性。
面包屑导航中斜杠用 ::after 插入的正确写法
直接上结论：用 ::after 给面包屑项（除最后一项）加斜杠最干净，关键是控制 content 和避免末尾多余斜杠。别用伪元素给最后一个 li 或 a 插，那会多一个。
常见错误是这么写：
nav li::after { content: "/"; }
结果最后也带斜杠，视觉上变成 首页 / 产品 / 详情 / —— 多了尾巴。
- 用
:not(:last-child)排除最后一项：nav li:not(:last-child)::after - 必须设
display: inline-block或inline（否则::after可能不渲染） - 斜杠前后加空格更美观，写成
content: " / "，但注意空格会参与布局，必要时用margin替代 - 如果面包屑用
ol/li结构，:last-child指的是最后一个li，不是ol自身，这点很稳
为什么不用 border-right 或背景图模拟斜杠
有人想绕开伪元素，用右边框或小图当分隔符。问题在于：斜杠是文字流一部分，要随字体缩放、对齐、换行；而 border-right 宽度固定，位置死板，遇到 font-size: 1.2em 或 line-height 变化就错位。
-
border-right无法垂直居中对齐文本基线，尤其在不同字体下表现不一 - 背景图需额外维护尺寸、重复方式和响应式适配，不如纯 CSS
content简洁 - 屏幕阅读器不会读取
border或背景图，但会忽略::after { content: "/" }（除非显式设aria-hidden="true"，一般无需干预）
::after 斜杠在 Flex 布局中的兼容性注意点
如果面包屑容器用了 display: flex，::after 默认会作为 flex item 参与排列，可能撑宽或换行。这不是 bug，是规范行为。
- 给
::after加flex-shrink: 0防止被压缩变形 - 若希望斜杠紧贴文字右侧，用
margin-left: 4px而非margin-right（因为它是插在元素末尾的） - IE11 对
:not(:last-child)::after支持完好，但若用:nth-last-child(2)类更复杂的选择器，IE 可能不认
移动端适配时斜杠消失？检查这几个地方
斜杠在手机上“不见了”，大概率不是伪元素失效，而是被裁切或透明了。
- 父容器设了
overflow: hidden且高度不够，斜杠在行末被截掉 -
font-size缩太小，导致" / "渲染为不可见宽度（尤其用系统字体时），可改用content: "/"+ 单独margin - 某些安卓 WebView 对
white-space: nowrap下的::after渲染异常，可尝试给li加min-width: max-content - 如果用了
transform: scale(0.9)类样式，::after内容也会缩，斜杠变细到看不见
斜杠看着小，但涉及字符渲染、流式布局、可访问性和跨端一致性——最容易被忽略的是 :not(:last-child) 的选择范围是否真覆盖了你要排除的那个节点，以及它是否被其他 CSS 规则意外重置了 display。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
