我正在尝试缩放 :before
我的内容<span>
到目前为止,悬停时会应用样式,但没有视觉变化,:before
保持相同的比例。
到目前为止我得到了什么:
<div class="comment-actions">
<span class="comment-likes icon-ico-heart">
12
</span>
</div>
SASS(CSS):
.comment-likes
transition: all 100ms ease-in-out
color: #92a3b9
cursor: pointer
&:hover::before
transform: scale(1.5)
Icomoon:
.icon-ico-heart:before {
content: "\e914";
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
最佳答案
增加悬停时的 font-size
并为其添加 transition
属性。
.icon-ico-heart:before {
font-size: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.icon-ico-heart:hover:before {
font-size: 15px;
}
您可以只使用 transition: font 0.3s ease;
只为字体应用过渡而不是所有
关于css - 规模 :before when hovering,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40237329/