如何为JS Counter-up计数器添加加号后缀？

方法一：CSS伪元素实现（最简单） #

直接通过CSS伪元素给所有计数器元素追加加号，完全不干扰JS的计数逻辑，代码量少且样式统一。

修改后的CSS代码：

.skills .counters h2 {
  margin: 30px 0 0 0;
  font-size: 60px;
  display: block;
  color: #eeaa0b;
  position: relative;
}

/* 给所有计数器元素添加加号后缀 */
.skills .counters h2[data-toggle="counter-up"]:after {
  content: "+";
  margin-left: 5px;
  color: inherit;
  font-size: inherit;
}

.skills .counters p {
  padding: 0;
  margin: 0;
  font-size: 18px;
  color: #353535;
}

这种方式的加号会和数字同步显示，包括计数动画过程中，样式也会和数字保持一致。

方法二：JS回调函数实现（计数完成后显示） #

如果需要让加号只在计数动画结束后才出现，可以利用counterUp插件的complete回调函数，在计数完成后修改元素文本。

修改后的JS代码：

// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
  delay: 10,
  time: 1000,
  complete: function() {
    // 给当前完成计数的元素追加加号
    $(this).text($(this).text() + '+');
  }
});

这种方式适合需要控制显示时机的场景，动画过程中仅显示数字，结束后才出现加号。

内容的提问来源于stack exchange，提问作者LeGRAND