Alexander Alexander - 11 months ago 83
CSS Question

Scale :before when hovering

I'm trying to scale the

content of my
when hovering over it.
So far the style gets applied when hovering but there are no visual changes, the
remains the same scale.

What I've got so far:

<div class="comment-actions">
<span class="comment-likes icon-ico-heart">


transition: all 100ms ease-in-out
color: #92a3b9
cursor: pointer

transform: scale(1.5)


.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;

Answer Source

Don't transform it with the scale property but use the font-size. So:

.icon-ico-heart:hover:before {
    font-size: 20px;