spanの前にfont-sizeをアニメーション化し、spanテキストの位置を保持する

Question

<span>のような、心臓（フォントアイコン）が:beforeであるようなボタンがあります。 :hoverまたは:activeの状態がアクティブな場合、:beforeのfont-sizeは増加します（遷移します）。

問題：スパンテキストが位置を変更します。 私はむしろそれを同じ場所にとどめたいと思う。

正常状態：

ホバー状態：

アクティブ状態（クリック）：

HTML：

<span class="comment-likes icon-ico-heart">12</span> 

SASS：

.comment-likes 
    user-select: none 
    color: #92a3b9 
    cursor: pointer 

    &:before 
    +transition(font 100ms linear, color 100ms linear) 

    &:hover::before 
    font-size: 13px 
    color: lighten($main-color, 15%) 

    &:active::before 
    font-size: 20px 
    color: $main-color 

    &.active 
    color: $main-color 

    &:hover::before 
     color: $main-color 

Answer 1

.comment-likes { 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
    display: inline-block; 
 
    color: hsl(213, 21%, 72%); 
 
    cursor: pointer; 
 
    font: 11px/1 sans-serif; 
 
} 
 

 
.comment-likes:before { 
 
    font: normal normal normal 11px/1 FontAwesome; 
 
    content: "\f004"; 
 
    margin-right: 4px; 
 
    
 
    display:inline-block; /* in order to allow CSS3 transform scale */ 
 
    transition: 0.3s; 
 
} 
 

 
.comment-likes:hover:before { 
 
    transform: scale(1.3); 
 
    color: hsl(213, 51%, 62%); 
 
} 
 

 
.comment-likes:active:before { 
 
    transform: scale(1.5); 
 
    color: hsl(213, 71%, 50%); 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<span class="comment-likes">12</span>