在多行标记中使用伪元素时如何避免空格？

Question

我在这里提出了一个问题：如何在跨多行包装标记时避免空格，并了解到我可以在跨多行编写标记时避免空格。::before但是，当我将此方法应用于具有伪元素和 的元素时::after，它不起作用。

同样，如果我只在一行上编写标记，它会如我所愿地<span class="inline">i, friend</span>显示“嗨，朋友” 。但是当我将它分成多行时，它会显示“H i，friend s” ，其中有不必要的空格。

这是我的 css 代码和 html 代码::

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-block;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}

<p class="parent">
  <span>
    i, friend
  </span>
</p>

我知道不建议写

<span>
  i, friend
</span>

代替<span>i, friend</span>。

但如果我坚持（原谅我），是否可以如我所愿地显示“嗨，朋友”？

Answer 1

尝试inline-flex代替inline-block

.parent {
  font-size: 0;
}
.parent > span {
  font-size: 16px;
  display: inline-flex;
}
.parent > span::before {
  content: "H";
}
.parent > span::after {
  content: "s";
}

<p class="parent">
  <span>
    i, friend
  </span>
</p>