Line break (like <br>) using only css
HtmlCssStylingHtml Problem Overview
Is it possible in pure css, that is without adding additional html tags, to make a line break like <br>
? I want the line break after the <h4>
element, but not before:
HTML
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
CSS
h4 {
display: inline;
}
I have found many questions like this, but always with answers like "use display: block;", which I can't do, when the <h4>
must stay on the same line.
Html Solutions
Solution 1 - Html
It works like this:
h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}
Example: http://jsfiddle.net/Bb2d7/
The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)
Solution 2 - Html
Solution 3 - Html
You can use ::after
to create a 0px
-height block after the <h4>
, which effectively moves anything after the <h4>
to the next line:
h4 {
display: inline;
}
h4::after {
content: "";
display: block;
}
<ul>
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
</ul>
Solution 4 - Html
I know I'm late to the party but here's my two cents.
CSS
li h4 {
break-after: always;
}
li h4::after {
display: block;
content: " ";
}