3

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>
pofilo
  • 33
  • 1
  • 5
  • What about this solution?https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip – Sphinx Jan 22 '18 at 19:36
  • Isn't this similar to this? https://stackoverflow.com/questions/5687035/css-bolding-some-text-without-changing-its-containers-size – Sheldon Scott Jan 22 '18 at 19:49

1 Answers1

4

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>
sol
  • 22,311
  • 6
  • 42
  • 59