如何在purecounterjs计数器文本后添加+符号？

下面提供几种简单有效的解决方法，让"+"符号和计数器数值保持在同一行：

方法1：用行内容器包裹计数器与"+" #

将计数器span和"+"放入同一个行内容器，从结构上保证两者不会换行：

<div class="count-box">
  <i class="bi bi-emoji-smile"></i>
  <span class="count-group">
    <span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="2" class="purecounter"></span>
    <span>+</span>
  </span>
  <p>Happy Clients</p>
</div>

若需要微调样式，可给容器加基础样式：

.count-group {
  display: inline-block;
}

方法2：CSS伪元素添加"+"（无需额外标签） #

不需要修改HTML结构，直接通过伪元素给计数器追加"+"，更简洁：

.purecounter::after {
  content: "+";
  margin-left: 4px; /* 可选，调整符号与数值的间距 */
}

如果仅需给部分计数器添加"+"，可给目标元素加专属类：

<span class="purecounter with-plus" ...></span>

对应CSS：

.purecounter.with-plus::after {
  content: "+";
}

方法3：调整计数器元素的显示属性 #

如果计数器默认是块级元素（这是换行的核心原因），直接修改其display属性：

.purecounter {
  display: inline-block;
}

之后直接在计数器后写"+"即可：

<span data-purecounter-start="0" data-purecounter-end="50" data-purecounter-duration="2" class="purecounter"></span>
<span>+</span>

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