Increase text size on hover

Question

So here is my problem: On hover, I want the size of the font to increase, but I want the black container to stay identic as before.

As you might understand with the example, the black container is also increasing.

This issue How to increase only font-size of the text inside the text box on hover is related but I don't want to use something like that (the size should be different according to the length of the text):

    position: absolute;
    height:20px;
    width:200px;

.myclass {
    background: black;
    padding: .2rem .6rem .3rem;
    font-size: 100%;
    color: white;
}
.myclass:hover {
    font-size: 120%;
}

<a href="example.com"><span class="myclass">Short</span></a>
<a href="example.com"><span class="myclass">Example mid</span></a>
<a href="example.com"><span class="myclass">Very long example</span></a>

Answer 1

You could use transform: scale() instead of font-size. You'll need to move the some styling to the anchor element...

a {
  background: black;
  padding: .2rem .6rem .3rem;
  font-size: 100%;
  color: white;
}

.myclass {
  display: inline-block;
}

a:hover .myclass {
  transform: scale(1.2);
}

<a href="example.com"><span class="myclass">Short</span></a>
<a href="example.com"><span class="myclass">Example mid</span></a>
<a href="example.com"><span class="myclass">Very long example</span></a>