：在伪元素与浏览器调整大小后的链接重叠之后

Question

我最近发现网站页脚的格式存在问题，无法解决。

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

Answer 1

我不得不将您较少的内容转换为Css put，但是您只需要将ul.links li a：after的position属性更改为相对

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>

Answer 2

您应该将after的属性设置为：（top => bottom）

&:after {
      content: "|";
      position: absolute;
      right: -10px;
      bottom: 0;
}

Answer 3

您可能会遇到与边框类似的东西...删除：after

a {
   position: relative;
   margin-right: 10px;
   border-right: 1px solid #000;
   padding-right: 10px;
}