CSS 如何实现面包屑导航？

Question

CSS 如何实现面包屑导航？

仓乃文 · Accepted Answer

面包屑导航通过伪元素在每个导航项后添加分隔符（如 / 或 >），利用 :last-child 隐藏最后一项的分隔符。

```css
.breadcrumb {
  display: flex;
  list-style: none;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin: 0 8px;
  color: #999;
}

.breadcrumb a {
  color: #6c5ce7;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb li:last-child {
  color: #666;
  pointer-events: none;
}
```

箭头分隔符：
```css
.breadcrumb-arrow li + li::before {
  content: ">";
  margin: 0 8px;
  color: #999;
}
```

补充说明：
- li + li::before 给除第一个外的所有 li 前添加分隔符
- :last-child 设置当前页面样式（灰色、不可点击）
- pointer-events: none 禁用最后一项的点击
- 适合网站层级导航、文件路径展示等场景