96

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.

Steeven
  • 4,057
  • 8
  • 38
  • 68
  • Why is this element an h4? Why do you use it in a place like this? – toniedzwiedz Jun 07 '12 at 14:31
  • Our of curiosity, what is the reason you don't want to use
    ?     – Philip Kirkbride Jun 07 '12 at 14:34
  • 1
    The reason: I have an awfull lot of list elements. And I was also wondering if an elegant solution exists. It is usually not nice to use br tags between elements (and I see the header as an element of its own) – Steeven Jun 07 '12 at 14:43
  • @Tom, this is a simplified example. I have som text and headers in each list element. – Steeven Jun 07 '12 at 14:45
  • possible duplicate of [How to insert a line break before an element using CSS](http://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css) – user Dec 03 '14 at 22:35

4 Answers4

155

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)

Community
  • 1
  • 1
adriantoine
  • 2,160
  • 1
  • 15
  • 14
  • 14
    `\a` means line break, character U+000A, and `white-space: pre` tells browsers to treat it as a line break in rendering. – Jukka K. Korpela Jun 07 '12 at 16:08
  • Okay, thanks @JukkaK.Korpela. Then why isn't it rendered as a line break in the first place? Though this solution is simple, it still would override other white-space commands. – Steeven Jun 07 '12 at 22:52
  • 3
    @Steeven, it only overrides the initial value for `white-space` on the `:after` pseudo-element, which contains just the line break. And it is needed because in HTML, by default, a line break in element content is equivalent to a space and does not cause a line break in the rendered document. – Jukka K. Korpela Jun 08 '12 at 02:36
  • 3
    @Alshten, thanks, makes sense & totally weirds me out at the same time. – sonjz Feb 04 '13 at 21:58
  • Would have never thought of this. It's a shame one can't insert HTML though! – Lodewijk Jun 14 '14 at 15:50
8

Try 

h4{ display:block;}

in your css

http://jsfiddle.net/ZrJP6/

Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
7

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>
0b10011
  • 18,397
  • 4
  • 65
  • 86
-1

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: " ";
}
Maximus Nerdous
  • 49
  • 1
  • 4