Корректные разделители меню

Question

Нужно сделать меню,между пунктами меню должен стоять разделитель " | ".Если меню не помещается в заданную ширину,то переносится на следующую строку(flex-wrap).Точное количество пунктов меню неизвестно-может быть и 1,и 10.Как сделать чтобы первый пункт каждой строки был без черточки?

Если есть одна строка,то я понимаю что нужно:

.li{
    border-left:2px solid #ffffff;
    margin-right:20px;
    padding-left:20px;
}
.li:first-child{
    border:none;
    padding-left:0;
}

(Отступ между пунктом и черточкой-20px) Если пишу этот код,то каждый первый пункт новой строки начинается с черточки слева.

Answer 1

CSS в данный момент не дает возможностей отдельно стилизовать автоматические переносы элементов (будь то перенос в флексбоксе, или в обычной строке документа).

Определение того является ли элемент первым в строке, возможно средствами DOM+JavaScript (например, сравнением разности координат, полученных методом getBoundingClientRect).

Без помощи кода, по-моему единственным вариантом остаются разнообразные костыли, которые не решают задачу, а обходят ее. Типа такого хака:

* { font-family: sans-serif; }
nav { display: flex; justify-content: center; background: #888; }

nav ul {
  list-style: none; 
  position: relative; 
  display: flex; flex-flow: row wrap; 
  margin: 0; padding: 0; 
  overflow-x: hidden; 
  background-color: inherit; 
}

nav ul::after {               /* ◀◀◀ */
  content: ''; 
  position: absolute; 
  top: 0; bottom: 0; left: -1px; 
  width: 3px; 
  background-color: inherit; 
}

nav li {
  margin: 0.3em 0; padding: 0 1em; 
  white-space: nowrap; 
  color: #fff; 
}

nav li:not(:first-child) {
  margin-left: -1px;           /* ◀◀◀ */
  border-left: 1px solid #fff; 
}

<nav>
  <ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
  </ul>
</nav>

Тест адаптивности - как обычно: запускаем пример, затем разворачиваем его на всю страницу, и меняем размеры окна/вьюпорта.

БЛОГ НА HUSL

Корректные разделители меню

Ответы (1 шт):