换行符(如<br>)仅使用css

Question

是否有可能在纯css中,即没有添加额外的html标签,使换行符像<br>？我想在<h4>元素之后换行,但不是之前:

HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

CSS

h4 {
  display: inline;
}

我发现了许多这样的问题,但总是有"使用display:block;"之类的答案.当我<h4>必须保持同一条线时,我不能这样做.

Answer 1

它的工作原理如下:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

`\ a`表示换行符,字符U + 000A,`white-space:pre`告诉浏览器将其视为渲染中的换行符. (9认同)
@Steeven,它只覆盖`:after`伪元素的`white-space`的初始值,它只包含换行符.并且它是必需的,因为在HTML中,默认情况下,元素内容中的换行符等效于空格,并且不会在呈现的文档中导致换行符. (3认同)
@Alshten,谢谢,有意义,同时也让我很奇怪. (3认同)

Answer 2

尝试

h4{ display:block;}

在你的CSS

Answer 3

您可以::after在之后创建一个0px-height 块<h4>，它可以有效地将之后的任何内容移动<h4>到下一行：

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>