Podział wiersza (jak <br>) przy użyciu tylko CSS

Czy w czystym css, czyli bez dodawania dodatkowych tagów html, można zrobić podział wiersza <br>? Chcę końca wiersza po <h4>elemencie, ale nie przed:

HTML

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

CSS

h4 {
  display: inline;
}

Znalazłem wiele takich pytań, ale zawsze z odpowiedziami typu „użyj wyświetlania: blok;” , czego nie mogę zrobić, kiedy <h4>muszą pozostać na tej samej linii.

Działa to tak:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

Przykład: http://jsfiddle.net/Bb2d7/

Sztuczka pochodzi stąd: https://stackoverflow.com/a/66000/509752 (aby uzyskać więcej wyjaśnień)

Próbować

h4{ display:block;}

w twoim css

http://jsfiddle.net/ZrJP6/

Możesz użyć, ::afteraby utworzyć 0pxblok -height po znaku <h4>, który efektywnie przesuwa wszystko po <h4>następnej linii:

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>