css - 伪元素仅在同一行的元素之间作为分隔符

Question

我想为以下问题找到一个优雅的解决方案。

我在响应式布局中使用竖线分隔链接，根据视口(viewport)的宽度，它们的外观如下:

在大屏幕上:

link | link | link | link | link

在较小的屏幕上

link | link | link
   link | link

注意竖线分隔符只出现在链接之间，而不出现在行的开头或结尾。

我考虑过使用一个简单的 :after 元素来添加 |使用 :last-child 规则来避免最后一项，但在自然换行的情况下我会得到这样的结果:

 link | link | link |
     link | link

有没有办法在纯 css 中做到这一点？谢谢

Answer 1

如果您可以在换行时将链接左对齐，您可以尝试这样的操作:

fiddle

nav {
  overflow: hidden;
}

ul {
  padding: 0;
}

li {
  display: inline-block;
  font-size: 4rem;
  position: relative;
  padding: 0 1rem;
}

li:before {
  content: '|';
  position: absolute;
  left: -.5rem;
}

<nav>
  <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</nav>