SASS При выборе всех элементов ожидать первого ребенка

Question

Попытка добиться следующего в SASS, но у меня не получилось с $: not (: first-child): before selector

Ссылка | Ссылка | Ссылка

HTML-код
<ul class="multistore"> <li class="tab"> <a class="tab-link">Link</a> </li> <li class="tab"> <a class="tab-link">Link</a> </li> <li class="tab"> <a class="tab-link">Link</a> </li> </ul>

SASS

.tab-link {
    &:not(:first-child):before {
          content: "|";
    }      
}

Проблема в том, что мой результат

| Ссылка | Ссылка | Ссылка

Но я думаю, что это может быть связано с тегом A внутри li, и каждый A является первым потомком li.

PS Содержимое должно быть добавлено к элементу A, но не из-за дизайна макета.

Answer 1

Полагаю, это то, что вы хотите:

.multistore { list-style-type: none; }
.multistore li { display: inline-block; }

.tab:not(:first-child) .tab-link::before {
  content: "| ";
}

<ul class="multistore">
  <li class="tab">
    <a class="tab-link">Link</a>
  </li>
  <li class="tab">
    <a class="tab-link">Link</a>
  </li>
  <li class="tab">
    <a class="tab-link">Link</a>
  </li>
</ul>

Это работает, но есть проблема: | становится частью кликабельной ссылки, и пользователю будет неясно, к какой ссылке относится эта часть. Вот почему я настоятельно рекомендую вместо li поставить |.

P.S .: В SCSS:

.tab {
  &:not(:first-child) {
    .tab-link {
      &::before {
       content: "| ";
      }
    }
  }
}