How to Create CSS-Only Line Breaks Without ``?

CSS-Only Line Breaks: Beyond

The challenge of creating line breaks in pure CSS without introducing additional HTML tags has puzzled developers. This is particularly pertinent when the line break is desired after a specific element, such as an

, while maintaining the element's inline alignment.

The CSS Solution

Fortunately, a clever CSS workaround allows you to achieve this desired effect. By leveraging the display: inline property and manipulating the content and white-space properties of the element, you can induce a line break specifically after the targeted element.

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

Copy after login

In this code, the display: inline property ensures that the

element remains on the same line. The key to the line break lies in the :after pseudo-element. By setting its content to the ASCII character a, which represents a line feed, and its white-space to pre, you force a line break after the

.

Example in Action

Consider the following HTML:

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

Copy after login

Applying the above CSS to this HTML results in a line break only after the

element, preserving its inline positioning:

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

Copy after login

Conclusion

This CSS technique provides a reliable way to implement line breaks in pure CSS, even after inline elements. It offers a desirable solution for scenarios where HTML modifications are not feasible.

The above is the detailed content of How to Create CSS-Only Line Breaks Without ``?. For more information, please follow other related articles on the PHP Chinese website!