为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

function getAllGroups(){
    $query = $this->db->query('SELECT cityidd,city FROM citys');
    return $query->result_array();
}

.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%);
}