Can You Force a Line Break After an Inline `` Element with CSS Only?

Creating Line Breaks with CSS

Can you achieve a line break using only CSS, without adding HTML tags? The goal is to insert a line break after an

element without affecting its inline status.

Solution:

To accomplish this, follow these steps:

1. Apply display: inline; to the

   element to keep it on the same line.

2. Create a pseudoselector for

   :after and add the following styles:

   • content: "a"; to insert an invisible non-breaking space at the end of the

     element.

   • white-space: pre; to preserve any leading whitespace in the text that follows the

   .

Example:

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

By adding this CSS, a line break will appear after the

element, maintaining its inline display behavior.

For further explanation, refer to: https://stackoverflow.com/a/66000/509752

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