换行（如<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;
}

我发现了很多像这样的问题，但是当<h4>必须保持不变时，我总会得到像“使用display：block;”这样的答案，这是我无法做到的线。

Answer 1

它的工作原理如下：

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

示例：http://jsfiddle.net/Bb2d7/

诀窍来自：https://stackoverflow.com/a/66000/509752（有更多解释）

Answer 2

尝试

h4{ display:block;}

在你的CSS中

http://jsfiddle.net/ZrJP6/

Answer 3

您可以使用::after在0px之后创建<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>