How can I avoid space while using pseudo-elements in multi-line markup?

Question

I raised a qustion here: How to avoid spaces when wrapping markup across multiple lines, and learned that I can avoid white space while writing markup across multiple lines. However, when I apply this method to a element with pseudo-elements ::before and ::after, it doesn't work.

Similarly, if I write markup on only one line as <span class="inline">i, friend</span>, it will display "Hi, friends" as I wish. But when I divide it into multiple lines, it will display "H i, friend s" with needless white spaces within it.

Here is my css code & html code::

.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>

I know it's not recommended to write

<span>
  i, friend
</span>

instead of <span>i, friend</span>.

But if I insist on it(forgive me), is it possible to display "Hi, friends" as I wish?

Answer 1

Try inline-flex instead of 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>