CODEWITHSUNDEEP
htmlcssnewline
user7988893
user7988893

Reputation:

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

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

Upvotes: 0

Views: 209

Answers (1)

DevDisrupt
DevDisrupt

Reputation: 154

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.

Upvotes: 1

Related Questions