Adding Border On Hover 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 el

Solution 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: 15px80px;
  z-index: 1;
}
sectionh1 {
  font-size: 3em;
  font-weight: 100;
  line-height: 1.3;
}
sectiona {
  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.twelvea {
  color: #D8315B;
  font-weight: 700;
  overflow: hidden;
  padding: 0px5px;
  transitionall0.2s ease;
  border-bottom: 5px solid transparent;   /* ADJUSTMENT */
}
.twelvea: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%);
}
.twelvea:hover::before {
  transform: translateX(-95%);
  background: #D8315B;
}
.twelvea:hover {
  color: #FFFAFF;
  transform: translateX(5px);
  border-bottom: 5px solid white;       /* ADJUSED */
}

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

Solution 2:

Yes, on hover you are changing element's border, so, element's total height also changes