html - 添加|到菜单中的 li 标签

Question

是否可以在 CSS 中为菜单中的每个列表元素添加 | 作为分隔符？

我尝试了 content: "|"，但没有成功。

菜单看起来像这样:

<ul>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
  <li><a href="...">link</a></li>
</ul>

结果是:

链接链接链接链接

我想要:

链接 |链接 |链接 |链接

我知道如何用 JavaScript 实现，但 CSS 会更好 :) 菜单是自动生成的，我不想弄乱它。

Answer 1

你需要为内容使用伪元素，比如::before 或::after:

li + li::before {
    content: "| ";
}

Here’s a demo.

正如其他人所提到的，如果您正在寻找一条线，请使用 border-(left|right) 和 padding 或 margin必要时。