Can You Force a Line Break After an Element Using Only CSS?

Creating Line Breaks with CSS

Need a line break, but don't want to add extra HTML tags? CSS has you covered! Here's how to achieve a line break after a specific element like an

:

Question:

Can you force a line break after an element using only CSS, without adding HTML tags?

Challenge:

Suppose we have an

element nestled within a

:

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

Copy after login

We want a line break after the

but not before, while keeping it inline. However, setting display: block; is not an option as it would disrupt the element's positioning.

Solution:

With some clever CSS, we can achieve this:

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

Copy after login

Explanation:

• display: inline; keeps the

  element on the same line.

• h4:after creates a pseudo-element after the

  and inserts the Unicode character "a" (line break).

• white-space: pre; ensures that the inserted line break is visible.

Example:

Check out this fiddle for a live demo: http://jsfiddle.net/Bb2d7/

The above is the detailed content of Can You Force a Line Break After an Element Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!