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

Question

I want to add an em-space just after BR tag so as to achieve text-indent effect. But the following STYLE doesn't work on my Chrome.

Or, any other way to achieve text-indent effect after BR tag?

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

Answer 1

You really shouldn't be using a line break (br) tag to break up paragraphs, not in modern web design. See the HTML 5.2 spec for some examples.

Furthermore, there is a CSS property text-indent which also achieves the text indentation you are after.

Basically, use <p> as intended (eg to wrap a paragraph) and then apply text-indent to the p tags.

 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 is a very old property with wide support across all major browsers and a lot of older ones too. It was first introduced in IE 3, to give a sense of how old it is. See MDN for more information.

Answer 2

I managed to do this to add an em space just after BR tag!

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

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

Another problem is that I also want to keep 1em margin-bottom. The following style ALONE works well.

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

BUT, if i mixed the two styles into the following, it doesn't work!!!

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

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