Flex box moves on hover

user_12822059 0
Viewed 2022

Whenever I hover over text I want it to have a bottom border. However, I also get my text moved upwards. Maybe any suggestions? Image before is incorrect position and image after is lifted a bit. I know you can't see it from screenshots. However, I do not know how to upload a video.

.pages {
  width: 370px;
  font-family: 'Heebo', sans-serif;
  font-size: 18.5px;
  display: inline-flex;
  flex-direction: row;
  margin: auto 0px auto 0px;
  justify-content: space-between;
  padding: 0px 24px 22px 0px;
}

.pages :hover {
  cursor: pointer;
  border-bottom: 1px solid black;
  padding-bottom: 1px;
}
<div class="pages">
  <a id="Gallery">Gallery Walls</a>
  <a id="Contact">Contact</a>
  <i class="fab fa-instagram" id="icon"></i>
  <i class="fas fa-store" id="icon"></i>
</div>
<div>
  Page content
</div

flexbox css html
3 Answers

The element moves because you are adding padding and a border on hover, thus changing the size of the element. Rather than adding a border on hover, give the elements a border (and padding) to start with and then just change the color of the border from transparent to the color of your choosing.

For example:

.pages > * {
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.pages > :hover {
    border-bottom-color: black;
}

Note the child combinator (>) isn't necessary with your current HTML structure, but is useful in case you add subelements within any of your a or i elements. Alternatively, you could give each child of pages the same class (e.g. page-link) and use that here instead.

user_80686250

You need to add a default transparent border, or margin/padding to start so the browser calculates this total height when positioning. All you do on hover is change the border style and color so that the overall height is the same.

Example:

.pages {
  width: 370px;
  font-family: 'Heebo', sans-serif;
  font-size: 18.5px;
  display: inline-flex;
  flex-direction: row;
  margin: auto 0px auto 0px;
  justify-content: space-between;
  padding: 0px 24px 22px 0px;
  border-bottom: 1px solid transparent;
}

.pages :hover {
  cursor: pointer;
  border-bottom: 1px solid black;
  padding-bottom: 1px;
}
<div class="pages">
  <a id="Gallery">Gallery Walls</a>
  <a id="Contact">Contact</a>
  <i class="fab fa-instagram" id="icon"></i>
  <i class="fas fa-store" id="icon"></i>
</div>

user_622820

Its because you had given padding-bottom 1px on hover

.pages {
  width: 370px;
  font-family: 'Heebo', sans-serif;
  font-size: 18.5px;
  display: inline-flex;
  flex-direction: row;
  margin: auto 0px auto 0px;
  justify-content: space-between;
  padding: 0px 24px 22px 0px;
}

.pages :hover {
  cursor: pointer;
  border-bottom: 1px solid black;
}
<div class="pages">
  <a id="Gallery">Gallery Walls</a>
  <a id="Contact">Contact</a>
  <i class="fab fa-instagram" id="icon"></i>
  <i class="fas fa-store" id="icon"></i>
</div>

user_139171620
Related