Вы можете сделать это с помощью border-left на последнем li, используя: last-child псевдоэлемент или размещенный контент, используя: before псевдоэлемент. Обратите внимание, что при добавлении псевдоэлементов они добавляются как первый дочерний элемент выбранного элемента. Это может играть роль в других проблемах стиля.
РЕДАКТИРОВАТЬ - после моего комментария выше - единственный действительный дочерний элемент ul - это li, поэтому вы должны изменить свою HTML-структуру, чтобы гарантировать, что любые элементы div / dropdowns et c являются детьми li - не родительского ul.
Спасибо @dale lan dry за использованный ниже скелет кода:)
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
}
.nav-item:last-child {
border-left: solid 1px black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
или с помощью псевдоэлемента: before
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}
.flex-box {
display: flex;
}
li, .nav-item {
text-decoration: none;
list-style-type: none;
padding: 2px 12px;
color:black;
position: relative
}
.nav-item:last-child:before {
position: absolute;
content: "|";
left: 0;
color: black;
}
<div>
<ul class="flex-box">
<li class="nav-item">
<a class="nav-link" routerLink="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/login">Login</a>
</li>
</ul>
</div>
или просто добавив элемент aen, равный высоте всего li в качестве разделителя:
.nav-item:last-child {
position: relative
}
.nav-item:last-child:before {
position: absolute;
left: 0;
top:0;
bottom:0;
width: 1px
background-color: #d4d4d4;
}
И если вы не не хотите полагаться на псевдоселектор: last-child - вы можете добиться того же, добавив класс к последнему элементу
<li class="nav-item login-link">
<a class="nav-link" routerLink="/login"style="color:White">Login</a>
</li>
//css
.login-link {
border-left: solid 1px #d4d4d4;
}
И если вы хотите разделить между каждым ли - но не справа от последнего вы можете использовать прямой братский комбинатор "+"
.nav-item + .nav-item {
border-left: solid 1px #d4d4d4;
}
или с помощью псевдоэлемента: before
.nav-item {
position: relative
}
.nav-item + .nav-item:before {
position: absolute;
content: "|";
left: 0;
color: #d4d4d4;
}