直接用 ::before 给每个导航项加斜杠会出错，因为首个 li 前也会插入斜杠；应使用 li:not(:first-child)::before 限定非首项，并通过 margin-right 或 content 中加空格控制间距，小屏下用 display: none 隐藏，ie8 需回避 :not() 并避免 url() 和高级 css 特性。
为什么直接用 ::before 给每个导航项加斜杠会出错？
因为 ::before 是在元素内容前插入，如果给所有 li 都加 content: "/"，第一个项前面也会多出一个斜杠，变成 /首页/产品/帮助 —— 这显然不对。
常见错误写法：
nav li::before { content: "/"; }
结果就是开头多斜杠，且末尾没处理空格或对齐问题。
- 真正该做的是：只给「非第一个」的项加分隔符
- 用
:not(:first-child)限定范围，而不是靠 JS 或额外 HTML 标签 - 注意
content默认是 inline 级，不会自动换行或撑开间距，需配合margin或padding
怎么让分隔符和文字对齐、不挤在一起？
默认情况下 ::before 插入的 / 会紧贴前一项文字，比如「首页/产品」中间没空隙，视觉上粘连。这不是 bug，是 CSS inline 行为的自然表现。
- 加
margin-right: 0.5em;给分隔符右侧留白（推荐） - 或者用
content: " / ";直接塞空格——但要注意空格可能被 HTML 压缩，不如margin可控 - 如果导航项用了
display: flex，::before的盒模型行为可能受align-items影响，建议统一设vertical-align: middle
响应式下分隔符要不要隐藏？
小屏时面包屑常折叠或换行，分隔符若强行保留，可能断在行首或行尾（如换行后出现孤立的 /），影响可读性。
- 用媒体查询在小屏下隐藏分隔符：
@media (max-width: 768px) { nav li:not(:first-child)::before { display: none; } } - 别用
content: ""—— 它仍会占据伪元素位置，可能引发布局偏移；display: none才真正移除 - 如果用了 SVG 图标作分隔符（比如
content: url(arrow.svg);），也要同步控制其显示/隐藏，否则图标可能比文字还大
兼容性要注意哪些老浏览器？
::before 在 IE8+ 支持，但 IE8 不支持 :not() 伪类，所以 li:not(:first-child)::before 在 IE8 下会失效，所有项都加斜杠。
- 兼容 IE8 的写法：给第一个
li单独重置：nav li::before { content: "/"; }<br>nav li:first-child::before { content: ""; } - 注意 IE8 不支持
content的 URL 值（比如url()），只能用纯文本或 Unicode 字符（如"\2044"表示分数斜线） - 如果项目必须支持 IE8，还要避免在
::before里用transform或flex，它们会触发渲染异常
现在多数项目已放弃 IE8，但上线前仍建议用 Can I Use 查一下目标用户实际覆盖情况——伪元素本身很稳，坑基本都在选择器和 content 值的组合上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
