如何使用 CSS 在 BR 标签后添加 em 空格（）答案

【问题标题】：how to add em space (&emsp;) after BR tag using CSS如何使用 CSS 在 BR 标签后添加 em 空格（）
【发布时间】：2019-09-24 23:57:15
【问题描述】：

我想在 BR 标签后添加一个 em-space 以达到文本缩进的效果。但以下 STYLE 不适用于我的 Chrome。

或者，还有什么其他方式可以实现BR标签后的文本缩进效果？

<style>
br::after { 
  content: "&emsp;";
}
</style>

<p>Note:<br>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>

【问题讨论】：

请注意，::after 插入为所选元素的last child，而不是元素之后。

标签： html css line-breaks text-indent

【解决方案1】：

您真的不应该使用换行符 (br) 标签来分隔段落，而不是在现代网页设计中。有关示例，请参阅HTML 5.2 spec。

此外，还有一个 CSS 属性 text-indent 也可以实现您所追求的文本缩进。

基本上，按预期使用<p>（例如换行），然后将text-indent 应用于p 标签。

p {
  text-indent: 1em;
}
p.unindented {
  text-indent: inherit;
}

<p class="unindented">Note:</p>
<p>For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after).</p>
<p>Here is another paragraph to show how this applies when you have more than one &lt;p&gt; of content. The text-indent property is supported by all major browsers. (That is, IE 3 and later. Not that IE is a major browser anymore....)</p>
<p>See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent</p>

text-indent 是一个非常古老的属性，在所有主流浏览器和许多旧浏览器中都有广泛的支持。它最初是在 IE 3 中引入的，以便了解它的历史。请参阅MDN 了解更多信息。

【讨论】：

这是一个框架挑战，因为不应该像这样使用 BR 标签，并且有一种内置的方式来做文本缩进，这种方式一直存在。

【解决方案2】：

我设法在 BR 标签后添加了一个 em 空格！

<style>
br {
  content: '';
  white-space: pre;
}

br::after { 
  content: "\A\2003";
}
</style>

另一个问题是我还想保持 1em 的边距底部。以下样式 ALONE 效果很好。

<style>
br {
  content: '';
  display: block; 
  margin-bottom: 1em; 
}
</style>

但是，如果我将这两种样式混合到以下样式中，它就不起作用了！！！

<style>
br {
  content: '';
  white-space: pre;
  display: block; 
  margin-bottom: 1em; 
}

br::after { 
  content: "\A\2003";
}
</style>

【讨论】：

我的意思是，你不应该使用这样的 BR 标签。除此之外，这基本上正是 text-indent 属性的用途。