Html 跨度末尾的空白会影响after伪元素的绝对位置

在我的站点上设置组件的样式时，我发现在

span

的

h2

中添加空格会以一种奇怪的方式影响

span:after

的绝对位置。我用作边框的

元素之后的
。边框将自身定位在不带空格的内容之后，但在有空格时将自身定位在内容之上

有没有关于为什么会出现不同结果的想法？

html:

我认为这两种情况（有尾随空格和没有尾随空格）的主要区别在于，如果需要，浏览器通常会将内容包装为空白。因此，在第一种情况下（带有尾随空格），浏览器别无选择，只能推出该跨度的宽度，因为
：after
伪元素不能换行。在第二种情况下，浏览器使用伪元素上的
position:absolute
声明作为键来保留原始跨距的宽度，并且在伪元素之前有空格，浏览器可以将伪元素包装到下一行。即使伪元素的宽度设置为10px而不是100%，您也会看到这种效果

由于这在Firefox和Chrome中的表现有所不同，我不确定哪一种行为符合标准，或者是否指定了这种情况。
看起来像是由于
宽度：100%
造成的包装。注意：在Firefox中，这两种情况看起来相同，但是我确实看到了Chrome的不同。你有兴趣用其他方法来避免这个问题吗？或者你已经用不同的方法修复了它，但对你遇到的这个问题感到好奇了吗？@andi如果有一个简单的解决方案，我想听听。此时更改标记将是一件麻烦事。谢谢。@smilebomb我想你想让它看起来像非空白的盒子吗？这里有一个可能性：这对我来说是有意义的。在我选择答案之前，我将把这个问题留待一会。
<h2>
<span>A test</span> <!-- the border appears 'after' the content -->
</h2>
<h2>
<span>A test </span> <!-- the border appears 'over' the content -->
</h2>

h2 {
  position:relative;
  height:1.625em/1;
}
h2 span {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: top;
  display: inline-block;
  1.625em/1 'MuseoSlab300','Times New Roman',serif;
}
span:after {
  content: "";
    border-bottom: 5px solid #7c61a0;
    position: absolute;
    bottom: 5px;
    margin-left: 8px;
    width: 100%;
}