Ngắt dòng (như <br>) chỉ sử dụng css

Question

Có thể trong css thuần túy, nghĩa là không thêm thẻ html bổ sung, để ngắt dòng như <br>? Tôi muốn các ngắt dòng sau khi các yếu tố <h4>, nhưng không phải trước đây:

HTML

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

CSS

h4 { 
    display: inline; 
} 

Tôi đã tìm thấy rất nhiều câu hỏi như thế này, nhưng luôn luôn có câu trả lời như "sử dụng display: block; ", mà tôi không thể làm, khi <h4> phải ở trên cùng một dòng.

Answer 1

Nó hoạt động như thế này:

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

Ví dụ: http://jsfiddle.net/Bb2d7/

Bí quyết xuất phát từ đây: https://stackoverflow.com/a/66000/509752 (có nhiều lời giải thích)

Answer 2

Hãy thử

h4{ display:block;} 

trong css của bạn

http://jsfiddle.net/ZrJP6/

Answer 3

Bạn có thể sử dụng ::after để tạo ra một khối -height 0px sau <h4>, mà hiệu quả di chuyển bất cứ điều gì sau khi <h4> đến dòng kế tiếp :

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>