Line break (like <br>) using only css
Solution 1:
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:
Try
h4{ display:block;}
in your css
http://jsfiddle.net/ZrJP6/
Solution 3:
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>