时间戳

首页 > 解决方案 > :在浏览器调整大小后伪元素与链接重叠后

html - :在浏览器调整大小后伪元素与链接重叠后

问题描述

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

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

标签： htmlcss

解决方案

我不得不将您的 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>

推荐阅读