html - :after pseudoelement overlapping with link after browser resize

Question

我最近发现网站页脚的格式存在问题，但不知道如何解决。

我有一系列带有“\”的链接 :after 伪元素用作每个链接之间的分隔符。当链接文本超过 40 个字符并且浏览器变窄时，链接文本会拆分并换行到下一行，但分隔符仍保留在行上并与链接文本的第一部分重叠。如何更改 CSS，使分隔线也环绕并显示在每个链接的末尾，即使链接文本很长或环绕到下一行？

Answer 1

我不得不将你的 less 转换为 Css put 但是你只需要将 ul.links li a:after 的 position 属性更改为 relative

ul.links {
  margin: 25px 0 0 0;
}
ul.links li {
  list-style: none;
  display: inline-block;
}
ul.links li:last-child a:after {
  display: none;
}
ul.links li a {
  position: relative;
  margin-right: 10px;
}
ul.links li a:after {
  content: "|";
  position: relative;
  right: -10px;
  top: -4px;
}

 <ul class="links">
        <li><a href="foo">bar1</a></li>
        <li><a href="foo">bar2</a></li>
        <li><a href="foo">bar3</a></li>
        <li><a href="foo">bar4</a></li>
        <li><a href="foo">bar5</a></li>
  </ul>