如何用CSS消除元素内容与::after伪元素内容间的多余空格？

可以通过CSS实现，无需依赖HTML编写者刻意避免添加空格，以下是两种可靠方案：

方案1：使用Flex布局 #

给目标元素设置display: inline-flex（保留行内元素特性），元素的文本内容和::after伪元素会作为flex子项排列，HTML中的空白字符不会被渲染为可见空格：

.x {
  display: inline-flex;
}
.x::after {
  content: "\00A7";
}

方案2：通过font-size消除空白 #

将目标元素的font-size设为0，再给元素内容和伪元素重新设置正常字体大小，HTML中的空白字符会因字体大小为0而不可见：

.x {
  font-size: 0;
}
.x::after {
  content: "\00A7";
  font-size: 16px; /* 根据需求调整为实际使用的字体大小 */
}
/* 若元素内包含其他子元素，需单独为子元素设置font-size */
.x span {
  font-size: 16px;
}

效果验证 #

用你提供的HTML代码测试：

<span class="x">I wish these were identical </span>
<br>
<span class="x">I wish these were identical</span>

应用上述任意一种CSS方案后，两个<span>的显示效果完全一致，末尾的§符号与文本之间不会出现额外空格。

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