Bootstrap вертикальный разделитель navbar

Question

У меня проблемы с добавлением вертикального разделителя в моей панели навигации. css, который я использую, работает, но вертикальный разделитель отображается только на последней ссылке в меню? Я искал здесь и нашел решение поставить рамку слева, которая сработала, но не очень хорошо выглядит в моем меню. Как вы можете видеть из изображения разделителя в конце, я пытаюсь показать его на каждой ссылке.

У меня красивые штаны, когда дело доходит до css, и я уверен, что у меня запутался селектор.

Есть какие-нибудь указатели?

    <div class="container-fluid p-0">
  <div class="row no-gutters shadow">
    <div class="col-sm-12 col-md-12 col-lg-1">
      <img src="<?php echo URLROOT.'/public/img/msplogo.jpg'; ?>" class="header-logo mx-auto d-block"/>
    </div>
    <div class="col-sm-12 col-md-12 col-lg-11">
      <div class="row no-gutters h-50">
        <div class="d-none d-lg-block col-12">
          <nav class="navbar navbar-expand-lg navbar-dark bg-msp-darkblue h-100 py-0">
              <ul class="navbar-nav h-100 mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
              </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

/* Large viewport navbar */
.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
  border-bottom: 5px solid transparent;
  height:100%;
  padding-top:1.4vw;
}

.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}

.nav-link:before {
    position: absolute;
    content: '';
    top: calc(50% - 1rem);
    right: 0;
    width: 1px;
    height: 30px;
    background-color: rgba(255,255,255,.15);
}

Answer 1

Можно сформулировать полный ответ:

Поскольку элементы построены, а элементы с абсолютным позиционированием выбраны из потока документа, предстоящие <li> s и встроенные <a> эффективно накладывается поверх предыдущего содержимого .nav-link:before; следовательно, скрывая это. Z-индекс (из третьего измерения) решает эту проблему, перенося его на более высокий уровень.

Другая проблема связана с тем, что последний элемент дочерних элементов не равен .nav-link, но равен .nav-item. Таким образом, правильным решением было бы .nav-item:last-child>.nav-link:before{display:none}.

Последнее замечание относительно решения «без труб»; хотя это на самом деле предпочтительнее по сравнению со связыванием, объединением в цепочку и вложением в css для повышения производительности, не имеет смысла объявлять позицию, содержимое, верхнюю, правую, ширину и высоту фона для элемента, который вы не хотите отображать. Только display:none было бы достаточно.

Answer 2

Благодаря @ ravb78 я исправил свой код, используя position: относительный в nav-ссылке. Я хотел удалить канал в конце, и я подумал, что я мог бы использовать последнего потомка, но он просто удалил каналы в шрифте и оставил один в конце, как pi c. Я думаю, что это как-то связано с иерархией ссылок ????

Вместо этого я просто добавил .no-pipe css к последней ссылке.

/* Large viewport navbar */
.nav-link {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.8vw;
  font-weight: bolder;
  text-transform: uppercase;
  border-bottom: 5px solid transparent;
  height:100%;
  padding-top:1.4vw;
}
/* adds the hover affect on the links */
.nav-link:hover {
  border-bottom: 5px solid #ff7240;
  color:#fff!important;
}
/* adds the pipe to the links */
.nav-link:before {
  position: absolute;
  content: '';
  top: calc(50% - 0.9rem);
  right: 0;
  width: 1px;
  height: 30px;
  background-color: rgba(255,255,255,.15);
}
/* removes the pipe from the last link */
.no-pipe:before {
  position: absolute;
  content: '';
  top: calc(50% - 1rem);
  right: 0;
  width: 0px;
  height: 30px;
  background-color: rgba(255,255,255,.15);
}