Разрыв строки (например, <br>) с использованием только CSS

Question

Можно ли в чистом CSS, то есть без добавления дополнительных тегов HTML, сделать разрыв строки, как <br>? Я хочу, чтобы разрыв строки после <h4> элемент, но не раньше:

HTML

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

CSS

h4 {
  display: inline;
}

Я нашел много вопросов, подобных этому, но всегда с ответами типа "использовать дисплей: блок;" что я не могу сделать, когда <h4> должен оставаться на одной линии.

Answer 1

Это работает так:

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

Пример: http://jsfiddle.net/Bb2d7/

Трюк приходит отсюда: /questions/47229571/kak-vstavit-razryivyi-strok-v-dokumentyi-html-s-pomoschyu-css/47229634#47229634 (чтобы получить больше объяснений)

Answer 2

Пытаться

h4{ display:block;}

в вашем CSS

http://jsfiddle.net/ZrJP6/

Answer 3

Ты можешь использовать ::afterсоздать0pxвысотный блок после<h4>, который эффективно перемещает что-либо после <h4>на следующую строку:

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>

Answer 4

Я знаю, что опаздываю на вечеринку, но вот мои пять копеек.

CSS

      li h4 {
   break-after: always;
}

li h4::after {
   display: block;
   content: " ";
}