Move text up on hover without moving its container

Question

I have searched for solutions around the internet, and everyone suggested using position: relative and top: -2px or margin-top: -2px.

And both solutions indeed move the text inside the container, but also move the container itself up/down (or increases the height?):

An example using the first solution:

a {
    position: relative;
}
a:hover {
    top: -2px;
}

How would I go on about fixing this? I've been trying different ideas (for example, having containers in containers with hidden overflows and so on), but nothing has worked so far.

Answer 1

You can use padding to change the text position and give the parent element a fixed height. Then, on hover, lower the padding-top value, which will push the text to the top.

.wrap {
  background: #eeeeee;
  display: block;
  height: 50px;
}

a {
  padding: 15px;
  position: relative;
  display: block;
  transition-duration: 0.2s;
}

a:hover {
  padding-top: 10px;
  transition-duration: 0.2s;
}

<div class="wrap">
  <a href="#">Text</a>
</div>