Home > Article > Web Front-end > 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
<code class="html"><li> Text, text, text, text, text. <h4>Sub header</h4> Text, text, text, text, text. </li></code>
We want a line break after the
Solution:
With some clever CSS, we can achieve this:
<code class="css">h4 { display: inline; } h4:after { content: "\a"; white-space: pre; }</code>
Explanation:
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!