html - 在 span 中对之前的字体大小进行动画处理并保持 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>