消除元素在最后一个单词和 ：：之后文本内容之间的尾随空格

Question

有没有办法在CSS中指定HTML元素的内容与其::after内容之间不应有空格？显然，我可以要求作者不要在HTML中包含空格，但我不能依赖HTML作者来始终如一地做到这一点。以下是我所说的：

.x::after {
content: "0A7";
}

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

Answer 1

如果为生成的内容::after预留额外的空间(这可能是一件好事，因为否则屏幕阅读器可能会将其解释为最后一个单词的一部分(并将其宽度偏移，则可以实现视觉上一致的结果。正常文本流中的相邻空白自动折叠为单个空格，因此任何数量的空格都应该产生相同的结果，无论它是来自文本内容还是CSS伪元素(同样，只要它与white-space: normal处于正常的"内联"流中(：

.x::after {
content: " 0A7";
margin-left: -.5ch;
}

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

Answer 2

您可以使用flex:

HTML

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

CSS

.x::after{content:"0A7"}
span{display: flex;}

此处演示