html - 伪元素：字符之间的空格

Question

我有一个通过 CSS 添加括号的徽章。不幸的是，它还添加了空格，有没有办法在没有负边距的情况下删除空格？
当前输出：项目 (10)
期望输出：项目 (10)

.badge:before {
  content: '(';
}

.badge:after {
  content: ')';
}

JSFiddle

Answer 1

它会添加空格，因为您的标记中有空格。如果您这样做，则没有空格：

Items
<span class="badge">10</span>
<hr>
Items (10)

Answer 2

您的 html 代码中有空格。如果在文本元素（如 <span>）中使用，返回（不是 <br> 而是真正的返回）也会显示为空格。

<span class="badge">10</span>
<hr>

应该做的工作。