Alexander Alexander - 8 months ago 39
CSS Question

Animate font-size of before in span and keep the span text's position

I have a like-button which consists out of a

with a heart (font icon) as the
. When the
state is active, the
's font-size increases (with a transition on it).

Now the problem: the span text changes position. I'd rather have it stay in the same place.

normal state:

enter image description here

hover state:

enter image description here

active state (click):

enter image description here


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


user-select: none
color: #92a3b9
cursor: pointer

+transition(font 100ms linear, color 100ms linear)

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

font-size: 20px
color: $main-color

color: $main-color

color: $main-color


.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="//">

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