CODEWITHSUNDEEP
htmlcss
Ubi
Ubi

Reputation: 83

Possible to have one border overlap/cancel out another border?

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.

Upvotes: 1

Views: 66

Answers (1)

Itay Gal
Itay Gal

Reputation: 10834

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>

Upvotes: 1

Related Questions