Анимация размера шрифта до в span и сохранения положения текста диапазона

Question

У меня есть кнопка, состоящая из <span> с сердцем (значок шрифта) в качестве :before. Когда активен статус :hover или :active, размер шрифта :before увеличивается (с переходом на него).

Теперь проблема: текст изменения диапазона изменяется. Я предпочел бы, чтобы он остался на том же месте.

нормальное состояние:

парения состояние:

активное состояние (нажмите):

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>