Alexander Alexander - 1 month ago 6
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

<span>
with a heart (font icon) as the
:before
. When the
:hover
or
:active
state is active, the
:before
'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

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

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