Why same css can't add a new line for input element?

Question

It a smarty way to add a new line before every span tag.

 span { display: inline; } span:before { content: "\\a "; white-space: pre; } 

 <p> First line.<span>Next line.</span> <span>Next line.</span> </p> 

Now as the same way ,i want to add a new line at the end of every input element,why no new line for the input element?

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

 content:<input id="1th" type="text" > content:<input id="3th" type="text" > content:<input id="4th" type="text" > 

Answer 1

You've explicitly set your input's display property as inline .

An inline element does not start on a new line.

---

Solution :

A block-level element always starts on a new line

Change the input selector display property value to block .

 input{ display:block; } input::after{ content:"\\a "; white-space:pre; } 

 content:<input id="1th" type="text" > content:<input id="3th" type="text" > content:<input id="4th" type="text" > 

---

All of this is unnecessary , every HTML element is either a block element or an inline element . It turns out that the input element is a block element, making this CSS declaration redundant.