可能有一个边框重叠/取消另一个边框吗？

Question

I have two lists sitting side-by-side. In the full code there will be the ability to select one of the list items from the MainList which will show the relevant list items from the SubList. What I would like is for the border-right of the MainList to overlap the border-left of the SubList to make it look like the SubList items are being shown as a result of the selection in the MainList.

 ul { list-style: none; } .BigContainer { border: 2px solid #d50f67; border-radius: 5px; margin: 10px 0; padding: 5px; overflow: auto; } .MainListContainer { width: 50%; float: left; } .MainListItem { border-bottom: 1px solid #ddd; border-right: 1px solid white; padding: 5px; z-index: 2; } .MainListItem:last-of-type { border: none; } .SubListContainer { width: 45%; float: left; border: 1px solid #ddd; border-radius: 5px; } .SubListItem { padding: 5px; z-index: 1; }

 <div class="BigContainer"> <div class="MainListContainer"> <ul class="MainList"> <li class="MainListItem">List Option A</li> <li class="MainListItem">List Option B</li> <li class="MainListItem">List Option C</li> </ul> </div> <div class="SubListContainer"> <ul class="SubList"> <li class="SubListItem">Sub-Option 1</li> <li class="SubListItem">Sub-Option 2</li> <li class="SubListItem">Sub-Option 3</li> <li class="SubListItem">Sub-Option 4</li> <li class="SubListItem">Sub-Option 5</li> </ul> </div> </div>

So, the border-right of the MainList would be white/transparent to basically erase a portion of the SubList border. I appreciate that, at the moment, making this happen would remove more of the SubList border than desired, but I will code the selection process properly to ensure only the selected item has the relevant border styling applied.

Answer 1

Add selected class to the selected item, then add

.selected:after{
  content:"";
  position: absolute;
  right:-2px;
  top:0;
  width: 1px;
  height: 100%;
  background-color: white;
}

This will be placed right where you want it to. Note that MainListItem needs to have a position: relative; for the position to work.

 .selected:after{ content:""; position: absolute; right:-2px; top:0; width: 1px; height: 100%; background-color: white; } ul { list-style: none; } .BigContainer { border: 2px solid #d50f67; border-radius: 5px; margin: 10px 0; padding: 5px; overflow: auto; } .MainListContainer { width: 50%; float: left; } .MainListItem { border-bottom: 1px solid #ddd; border-right: 1px solid white; padding: 5px; z-index: 2; position: relative; } .MainListItem:last-of-type { border: none; } .SubListContainer { width: 45%; float: left; border: 1px solid #ddd; border-radius: 5px; } .SubListItem { padding: 5px; z-index: 1; }

 <div class="BigContainer"> <div class="MainListContainer"> <ul class="MainList"> <li class="MainListItem">List Option A</li> <li class="MainListItem selected">List Option B</li> <li class="MainListItem">List Option C</li> </ul> </div> <div class="SubListContainer"> <ul class="SubList"> <li class="SubListItem">Sub-Option 1</li> <li class="SubListItem">Sub-Option 2</li> <li class="SubListItem">Sub-Option 3</li> <li class="SubListItem">Sub-Option 4</li> <li class="SubListItem">Sub-Option 5</li> </ul> </div> </div>