MuhammadJ MuhammadJ - 23 days ago 6
CSS Question

Adding border on hover moves element and shifts surrounding elements

Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?

There's no margin .. And they're only moving when I add border to the

inline-block
element. Try to add more border width in
section.twelve a
like:

section.twelve a {
border-bottom: 10px solid #FFFAFF;
}


But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?

I just want to add any styles to the element without effecting the others.



section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}

section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;

}

section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}

section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}

.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}

<section class="twelve">
<h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1>
</section>




Answer

When you add or change the width of a border, that changes the size of the element. Hence, you'll notice a shift in size when the border size changes on hover.

One method to resolve this issue is to always have a border in the element, so the space is always reserved. But in the state where no border should be visible, make the border color transparent.

Here's an example:

section {
  position: relative;
  height: 300px;
  padding: 15px 80px;
  z-index: 1;
}
section h1 {
  font-size: 3em;
  font-weight: 100;
  line-height: 1.3;
}
section a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  vertical-align: bottom;
}
section.twelve {
  background: #121A5A;
  color: #FFFAFF;
}
section.twelve a {
  color: #D8315B;
  font-weight: 700;
  overflow: hidden;
  padding: 0px 5px;
  transition all 0.2s ease;
  border-bottom: 5px solid transparent;   /* ADJUSED */
}
.twelve a:before {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #FFFAFF;
  z-index: -1;
  transition: all 0.2s ease;
  transform: translateX(100%);
}
.twelve a:hover::before {
  transform: translateX(-95%);
  background: #D8315B;
}
.twelve a:hover {
  color: #FFFAFF;
  transform: translateX(5px);
  border-bottom: 5px solid white;       /* ADJUSED */
}
<section class="twelve">
  <h1>Write <a href="#">a headline</a> that makes people do kind of a double take whenthey read it.</h1>
</section>

Comments