html - Adding border on hover shifts surrounding elements

Question

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 1

When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.

One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's 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;   /* ADJUSTMENT */
}
.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>