伪元素仅作为同一行上的元素之间的分隔符

Question

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

我的链接由管道分隔，在响应式布局中，根据视口的宽度，它们的外观如下：

在大屏幕上：

link | link | link | link | link

在较小的屏幕上

link | link | link
   link | link

请注意，管道分隔符仅出现在链接之间，而不是出现在行的开头或结尾。

我想过使用一个简单的：after元素来添加|使用a：last-child规则来避免最后一项但我会在自然换行的情况下得到类似的东西：

 link | link | link |
     link | link

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

Answer 1

如果你可以在链接时左对齐链接，你可以尝试这样的事情：

fiddle

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;