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

在 span 中对之前的字体大小进行动画处理并保持 span 文本的位置

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

html

css

transition

font-size