本文介绍如何在使用 jQuery Counter-Up 插件实现数字动态递增时，统一为所有计数器结果添加“+”符号后缀，推荐采用 CSS ::after 伪元素方案，简洁、高效且不干扰 JavaScript 逻辑。

本文介绍如何在使用 jquery counter-up 插件实现数字动态递增时，统一为所有计数器结果添加“+”符号后缀，推荐采用 css `::after` 伪元素方案，简洁、高效且不干扰 javascript 逻辑。

在构建数据展示型页面（如技能统计、项目成果页）时，常需用到数字动态增长效果（counter-up）。但默认的 Counter-Up 插件仅渲染纯数字，而业务中往往需要附加单位或符号——例如将 “150” 显示为 “150+”，以强调“持续增长”或“超额达成”的语义。

最优雅、低侵入性的实现方式是利用 CSS 伪元素 ::after，而非修改 HTML 结构或重写插件逻辑。该方案优势显著：

• ✅ 无需改动 HTML 或 JavaScript，保持语义清晰；
• ✅ 支持全局统一控制样式（颜色、大小、间距）；
• ✅ 兼容 Counter-Up 的动画过程（伪元素随数字实时渲染，无闪烁）；
• ✅ 响应式友好，可配合 font-size 或 transform 精细调整位置。

实现步骤

1. 确保已正确引入依赖（jQuery + Waypoints + counterUp）：

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>

   ⚠️ 注意：原答案中引用的是较老版本（v1.0），建议升级至 counterUp v2.x（需搭配 waypoints@4.x），兼容性更佳。

2. 初始化 Counter-Up（保持原逻辑不变）：

   

   前端设计优化skill

   前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

   下载

   $('[data-toggle="counter-up"]').counterUp({
   delay: 10,
   time: 1000,
   // 可选：启用滚动触发（需配合 waypoints）
   offset: 100
   });

3. 通过 CSS 添加 “+” 后缀：

   /* 为所有带 data-toggle="counter-up" 的元素添加 "+" */
   [data-toggle="counter-up"]::after {
   content: "+"; /* 更直观写法，等价于 "\002B" */
   font-size: 60px;      /* 与 h2 字号一致，保证视觉协调 */
   color: #eeaa0b;       /* 继承主色，也可独立设色 */
   margin-left: 8px;     /* 微调间距，避免紧贴数字 */
   vertical-align: top;  /* 对齐顶部，避免基线偏移 */
   }

   ? 提示：若需支持 IE11，请改用 :after（单冒号）；现代浏览器推荐双冒号 ::after 以符合规范。

进阶技巧（可选）

• 差异化样式：若不同计数器需不同符号（如 “+” / “%” / “k”），可为各 <h2> 添加独立 class，再针对性定义 ::after：

  <h2 data-toggle="counter-up" class="counter-plus">65</h2>
  <h2 data-toggle="counter-up" class="counter-percent">85</h2>

  .counter-plus::after { content: "+"; }
  .counter-percent::after { content: "%"; }

• 动画增强：为 “+” 添加轻微缩放动画，强化视觉反馈：

  [data-toggle="counter-up"]::after {
    animation: pulse 1.5s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }

注意事项

• ❌ 避免在 HTML 中硬编码 +（如 <h2>65+</h2>），否则 Counter-Up 会将 + 视为非数字字符，导致计数失败或显示异常；
• ❌ 不要通过 JS 动态追加文本（如 $(el).text($(el).text() + '+')），这会中断动画流程并引发重复渲染问题；
• ✅ 推荐始终使用伪元素方案——它纯粹属于表现层，完全解耦逻辑与样式，符合前端最佳实践。

至此，你的计数器将稳定呈现为 65+、190+、150+、125+，既满足设计需求，又保障了代码健壮性与可维护性。