悬停时增加文字大小

Question

所以这是我的问题：在悬停时，我希望字体的大小增加，但我希望黑色容器像以前一样保持同意。

正如您可能对示例所理解的那样，黑色容器也在增加。

这个问题How to increase only font-size of the text inside the text box on hover是相关的，但我不想使用类似的东西（根据文本的长度，大小应该是不同的）：

    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

您可以使用transform: scale()而不是font-size。你需要将一些样式移动到锚元素......

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>