增加悬停时的文字大小

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() 而不是字体大小。您需要将一些样式移动到锚元素...

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>

增加悬停时的文字大小

Increase text size on hover

html

css

hover

text-size