仅使用 CSS 可以在元素后强制换行吗？

使用 CSS 创建换行符

需要换行符，但不想添加额外的 HTML 标签？ CSS 已满足您的需求！以下是如何在特定元素（如

）之后实现换行：

问题：

您可以仅使用 CSS 在元素之后强制换行吗，而不添加 HTML 标签？

挑战：

假设我们有一个

元素位于

中：

<code class="html"><li>
  Text, text, text, text, text. <h4 id="Sub-header">Sub header</h4>
  Text, text, text, text, text.
</li></code>

我们希望在

之后有一个换行符。但不是之前，同时保持内联。但是，设置显示：块；不是一个选项，因为它会破坏元素的定位。

解决方案：

通过一些巧妙的 CSS，我们可以实现此目的：

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

说明：

• 显示：内联；保留

• h4:after 在

  之后创建一个伪元素。并插入 Unicode 字符“a”（换行符）。

• white-space: pre;确保插入的换行符可见。

示例：

查看此小提琴的现场演示：http://jsfiddle.net/Bb2d7 /

以上是仅使用 CSS 可以在元素后强制换行吗？的详细内容。更多信息请关注PHP中文网其他相关文章！