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" >

Because `::before` and `::after` add content within the element, and inputs can't have any content within their element. See https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field — j08691, Oct 02 '18 at 13:30
can i add a new line with css for the input element? `
` can do ,but i want a css way. — , Oct 02 '18 at 13:33
You could wrap the content with a semantic `` element and set the label to block or inline block. E.g. `content:` — j08691, Oct 02 '18 at 13:37
Why are you not just changing it to be a block element? `input{ display:block; }` — epascarello, Oct 02 '18 at 13:46
@epascarello Then the inputs would be on their own line instead of next to the text. — Joseph Webber, Oct 02 '18 at 13:54
Well I would change the mark up. Only other option would be have to use JavaScript to alter the content. — epascarello, Oct 02 '18 at 14:00

score 1 · Accepted Answer · edited Oct 03 '18 at 03:29

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.

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

1 Answers1