如何避免中间空span改变相邻span间的水平间距？

核心修复方案 #

有两种可靠方式能保证空span的伪元素可见，且完全不影响相邻字符的间距：

1. 修改空span的显示类型：给空的.foo/.mid span设置 display: inline-block; width: 0;，让它本身不占水平空间，同时打破inline元素的连续排版上下文，避免触发浏览器的字体字距调整逻辑。
2. 绝对定位伪元素：将伪元素设置为position: absolute，脱离正常文档流，彻底不干扰相邻元素的布局。

针对示例的具体修改 #

第一个示例修复代码 #

修改.foo的样式，添加inline-block和width:0：

body * {
  padding: 0;
  margin: 0;
}

.main {
  font-size: 10em;
}

.foo {
  display: inline-block;
  width: 0;
}
.foo::after {
  display: inline-block;
  content: "";
  height: 1em;
  border: 3px solid;
  margin-right: -6px;
  width: 0;
}

.one {
  color: red;
}
.two {
  color: green;
  bottom: 1.35em;
}
.three {
  color: blue;
  bottom: 2.70em;
}
.one, .two, .three {
  position: relative;
  opacity: 50%;
}

label {
  font-size: 1em;
}

input:checked ~ div span#foo {
  display: none;
}

HTML保持不变：

<input type="checkbox" id="cb" name="toggle" value="" />
<label for="cb">toggle to see the effect</label>
<div class="main">
<div class="one">
rararara
</div>
<div class="two">
<span>r</span><span>a</span><span>r</span><span>a</span><span>r</span><span>a</span><span>r</span><span>a</span>
</div>
<div class="three">
<span>r</span><span class="foo" id="foo"></span><span>a</span><span class="foo" id="foo"></span><span>r</span><span class="foo" id="foo"></span><span class="foo" id="foo"></span><span>a</span><span class="foo" id="foo"></span><span>r</span><span class="foo" id="foo"></span><span>a</span><span class="foo" id="foo"></span><span>r</span><span class="foo" id="foo"></span><span>a</span>
</div>

第二个示例修复代码（绝对定位方案） #

调整.mid和伪元素的样式，让伪元素脱离正常流：

div {
  font-size: 10em;
}

.mid {
  position: relative;
  display: inline-block;
  width: 0;
}

input:checked + div > .mid::after {
  position: absolute;
  left: 0;
  content: "";
  height: 1.2em;
  margin-bottom: -0.2em;
  border: 3px solid magenta;
  width: 0;
}

.r {
  background-color: cyan;
  opacity: 50%;
}

.comma {
  background-color: yellow;
  opacity: 50%;
}

HTML保持不变：

<input type="checkbox" checked>
<div><span class="r">r</span><span class="mid"></span><span class="comma">,</span></div>
<div>r,</div>

问题根源解释 #

这个问题的核心是浏览器的inline文本排版逻辑：当两个字符所在的inline元素之间插入空的inline span时，浏览器的字体引擎会把这个空span当成inline上下文的一部分，触发字符间的字距调整（kerning）或布局计算，导致原本的字符间距被异常放大。

你提到的“隐藏后再显示问题消失”的异常，是浏览器排版引擎的重绘缓存机制导致的——隐藏元素会触发全量布局重排，再次显示时浏览器可能跳过了初始的字距计算步骤，但这属于浏览器的偶发行为，不能作为解决方案，必须通过CSS规则从根源上避免触发异常排版逻辑。

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