Блог

Недавно я обнаружил проблему с форматированием нижнего колонтитула моего сайта и не мог понять, как ее решить.

У меня есть серия ссылок с псевдоэлементом «»: after, служащим разделителем между каждой ссылкой. Когда текст ссылки превышает 40 символов и браузер сужен, текст ссылки разделяется и переносится на следующую строку, но разделитель остается на строке и перекрывается с первой частью текста ссылки. Как мне изменить CSS, чтобы разделитель также обтекал и отображался в конце каждой ссылки, даже если текст ссылки длинный или переносится на следующую строку?

Мне пришлось преобразовать ваш less в Css put, тем не менее, вам просто нужно изменить свойство position ul.links li a: после на 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>  

Вы должны установить атрибут after равным:(top=>bottom)

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

Вы могли бы достичь чего-то подобного с border… удаление: после

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