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

Question

我在这里提出了一个问题：How to avoid spaces when wrapping markup across multiple lines，并了解到我可以在跨多行编写标记时避免白色space。但是，当我将此方法应用于具有伪元素 ::before 和 ::after 的元素时，它不起作用。

同样，如果我只在一行上写标记<span class="inline">i, friend</span>，它会显示"Hi, friends"。但是当我把它分成多行时，它会显示 "H i, friend s" 里面有不必要的 white spaces.

这是我的 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>。

但是如果我硬要说(见谅)，能不能按我的意愿显示"Hi, friends"？

Answer 1

我不知道基于 CSS 的解决方案，但您可以使用一些简单的 JS 删除文本节点（导致空格）：

var pElement = document.querySelector(".parent>span");
for (node of pElement.childNodes)
    if (node.nodeType === 3 )
        node.textContent = node.textContent.trim();

在 window.onload 或 <body onload=" ... "

内

Answer 2

尝试 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>

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

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

html

css

spaces

line-breaks

pseudo-element