How to remove border from previous sibling? - css

Question

I'm using a trick to add a border between navigation items
li {
&:not(.active) {
&::before {
border-bottom: grey;
bottom: 0;
content: '';
height: 1px;
left: 20px;
position: absolute;
width: 220px;
:host-context(.minified) {
display: none;
}
}
It works fine. You can see the yellow marked line.
If navigation is active i do not add this border.
If the navigation link is active, i would like to remove the border from previous sibling. You can see the red arrow.
Anybody ideas how can i do that?

Answer 1

You can define the divider at the top of the li and remove the first divider with li:first-child:after
Now, when hovering you can access the next li with + and set the background to be transparent.
Here's an example:
html, body{
padding: 0px;
margin: 0px;
}
ul {
border-right: 2px solid #e5e5e5;
width: 180px;
box-shadow: 5px 2px 10px #e5e5e5;
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
height: 40px;
display: flex;
align-items: center;
margin: 0px;
padding-left: 15px;
position: relative;
}
li:after{
position: absolute;
background-color: #e5e5e5;
top: 1px;
height: 1px;
width: 130px;
left: 20px;
z-index: 1;
content: "";
}
li:first-child:after{
height: 0px;
}
li:hover {
color: #13A83E;
background-color: #e5e5e5;
}
li:hover + li:after {
background-color: transparent;
}
<ul>
<li>Dashboard</li>
<li>Assets</li>
<li>Devices</li>
<li>More</li>
<li>Options</li>
</ul>