Разрыв строки (например) с использованием только css

возможно ли в чистом 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;
}

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

3 74
html css styling

3 ответа:

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

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

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

трюк исходит отсюда:https://stackoverflow.com/a/66000/509752 (чтобы иметь больше объяснений)

120

попробовать 

h4{ display:block;}

в вашем css

http://jsfiddle.net/ZrJP6/

4

можно использовать ::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>
2