CODEWITHSUNDEEP
htmlcss
birdyoung
birdyoung

Reputation: 207

How to stop horizontal borders overlapping each other?

I have a few links that are stacked horizontal, and each of these have a border top and bottom, when I have one of these links I want that links top and bottom border to change to black. But at the moment they're overlapping and appearing to be thicker.. they should just remain as 1px and only change color. Any help appreciated. Codepen

<ul>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
</ul>

ul {
  list-style-type: none;
}
li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
li:hover {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

ul a {
  color: black;
}

Upvotes: 0

Views: 129

Answers (3)

symlink
symlink

Reputation: 12209

Select every list item except the first one, and move them up by 1px:

li:not(:first-of-type){
  margin-top: -1px;
}

Then select the sibling of the list item hovered over, and change that list item's top border to black:

li:hover + li {
  border-top-color: black;
}


ul {
  list-style-type: none;
}
li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}
li:hover {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

ul a {
  color: black;
}

li:not(:first-of-type){
  margin-top: -1px;
}

li:hover + li {
  border-top-color: black;
}
<ul>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
  <li><a href="#">link 1</a></li>
</ul>

Upvotes: 1

Kannan
Kannan

Reputation: 194

Instead of giving the border-top and border-bottom, we need to give border-top for all the elements and add border-bottom for the last element only.

Try the below CSS and let me know if it works for you.

ul {
  list-style-type: none;
}
li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid red;
 
}
li:last-child{
   border-bottom: 1px solid red;
}
li:hover,li:hover + li{
  border-top: 1px solid black;
}
li:last-child:hover{
 border-bottom: 1px solid black;
}
ul a {
  color: black;
}

Upvotes: 2

Karthik
Karthik

Reputation: 111

The problem here is that you have applied border-top and border-bottom. For the first element it will appear fine, the second element has border top which is collapsing with border-bottom of previous element.

To fix this just remove border-bottom from all the li elements Add Border-bottom to last-child. This is the fixed code

ul {
  list-style-type: none;
}
li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid red;
  
}
li:hover {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

li:last-child{
    border-bottom: 1px solid red;
}

ul a {
  color: black;
}

Upvotes: 1

Related Questions