Html 将字体从悬停的中心均匀展开

我有一个编辑按钮，当用户将鼠标悬停在上面时，我想增加它的大小。但是，它与文本保持一致，并且不会在图标的每一侧均匀展开，它只在右上角展开

#quiznavn::after {
    font-size: 10pt;
    font-family: "FontAwesome";
    content: "\f044";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
    color: black;
}
#quiznavn:hover::after {
    font-size: 13pt;
    font-family: "FontAwesome";
    content: "\f044";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
}

使用

而是将“变换原点”设置为50%50%

---

注意：如果您在iOS上使用此按钮，则需要在其前面加上-webkit transform，-webkit transform origin等前缀，否则它将无法工作。

我在代码中没有看到您所指的此按钮，因此我假设您有一个按钮

.btn{ 宽度：120px； 高度：60px； 填充：0； 字号：12号； 显示：表格； } .btn跨度{ 填充：0； 垂直对齐：中间对齐； 显示：表格单元格； 宽度：70px； } .btn跨度：第n个类型1{ 宽度：30px； } .btn:悬停i{ 字号：17号； } 点击我！

---

你能分享一个来自JSFIDLE的代码链接吗。至少你的问题会让我明白。那么你想让按钮平均展开吗？这就是你的问题所在吗。。对。正是我想要达到的目标：-不，这不是正确的答案。但我还是很欣赏你的方法。这是一个有效的答案，但我同意@foreyez解决方案更好。祝你好运

transform:scale(1.5)