面包屑分割符用::after看不到内容，主要因未设content值或元素不支持伪元素；需确保元素为块级/行内块级、content为非空字符串（如"/"），且最后一项用:not(:last-child)::after排除。
面包屑分割符用 ::after 插入时，为什么看不到内容？
常见原因是没设置 content 值，或元素本身不支持伪元素（比如 display: none 或非容器级元素）。::after 必须配合 content 才能渲染，且目标元素需为块级或行内块级（display: inline-block 也行），否则伪元素无处“附着”。
实操建议：
- 确保面包屑项（如
<li>或<span></span>）有明确的display值，避免继承display: none或display: contents -
content必须是字符串、属性值或计数器，空字符串content: ""不会显示任何内容，但能占位；要显示 “/”，得写content: "/" - 若用引号包裹，必须是英文单/双引号，
content: '／'（全角）或content: '/'（半角）都可，但注意字体是否支持
如何让最后一个面包屑不显示分割符？
直接给最后一项加 :last-child::after { content: none; } 不生效——因为 content: none 不是合法值。正确做法是覆盖 content 为空字符串，并隐藏它，或利用选择器排除。
实操建议：
- 用
:not(:last-child)::after更可靠：nav li:not(:last-child)::after { content: "/"; margin: 0 0.5em; } - 如果结构是
<div class="breadcrumb"> <a>Home</a><a>Blog</a><span>Post</span> </div>，则用.breadcrumb > *:not(:last-child)::after - 避免用
:last-of-type，当末尾混有不同标签（如<span></span>和<a></a>）时容易误判
content 插入符号后，间距和对齐总出问题？
伪元素默认是 inline 级，垂直方向按基线对齐，常导致 “/” 上下偏移、和文字不对齐。单纯调 margin 容易受字体大小影响，响应式下更难控。
实操建议：
- 给伪元素设
vertical-align: middle，比top或baseline更稳定 - 用
flex容器统一控制间距：把整个面包屑设为display: flex，分割符用::after插入后，再用margin-inline-start控制左侧间隔 - 若需等宽分隔（如图标），改用背景图或 SVG 内联，
content仅适合简单字符
IE11 下 ::after 分割符不显示或错位？
IE11 支持 ::after，但对 content 中的某些 Unicode 字符（如箭头、斜杠变体）渲染异常，且不支持 margin-inline-* 等逻辑属性。
实操建议：
- 坚持用 ASCII 斜杠
content: "/"，避免使用content: "›"或content: "»" - 用
margin-left/margin-right替代逻辑属性 - 若必须兼容 IE11 且用图标，退回到真实 HTML 元素（如
<span class="sep">/</span>），再通过 JS 动态插入，比纯 CSS 更可控
font-size、color、line-height，但不会继承 font-family 的 fallback 链——一旦指定的字体不含该字符，就可能回退成系统默认字体，造成视觉断裂。调试时先检查计算样式里的 font-family 实际生效值。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
