How to insert a line break before an element using CSS

Question

I feel like I saw a way  using the CSS content property  to insert a line break tag before an element  Obviously this doesn t work    restart before   content    lt br  gt        But how do you do this

User · Answer

assuming you want the line height to be 20 px     restart before         content   First Line        padding-bottom 20px         restart after        content   Second-line       position absolute      top 40px

User · Answer

Instead of manually adding a line break somehow  you can do implement border-bottom  1px solid  ff0000 which will take the element s border and only render border- lt side gt  of whichever side you specify

User · Answer

You can also use the pre-encoded HTML entity for a line break  amp  10  in your content and it ll have the same effect

User · Answer

I had no luck at all with inserting a break with  before  My solution was to add a span with a class and put the break inside the span  Then change the class to display  none  or display  block as needed   HTML       lt div gt            lt span class  ItmQty  gt  lt br   gt  lt  span gt            lt span class  otherclass  gt                 lt asp Label ID  QuantityLabel  runat  server  Text  Qty    gt                       lt  asp Label gt            lt  span gt            lt div class  cartqty  gt                 lt asp TextBox ID  QuantityTextBox  runat  server  Text   lt    Bind  Quantity    0        gt   Width  50  gt  lt  asp TextBox gt             lt  div gt       lt  div gt    CSS   media only screen and  min-width  854px         ProjItmQty               display  block          clear  both           media only screen and  min-width  1003px         ProjItmQty               display  none            Hope this helps

User · Answer

Yes  totally doable but it is definitely a total hack  people may give you dirty looks for writing such code    Here is the HTML    lt div gt lorem ipdum dolor sit  lt span id  restart  gt amit e pluribus unum lt  span gt  lt  div gt    Here is the CSS    restart before   content   hiddentext   font-size 0  display block  line-height 0      Here is the fiddle  http   jsfiddle net AprNY

User · Answer

body     line-height  127     p after   content    A    display  block  white-space  pre      https   www w3 org TR CSS2 generate html x18 The Content Proerty   newlines     p will not add margin nor padding at end of p inside parent block  e g   body     section     p     A   line break forces line space  equivalent styled line-height

User · Answer

You can populate your document with  lt br gt  tags and turn them on off with css just like any others    lt style gt   hideBreaks    display none     lt  style gt   lt html gt  just a text line lt br class  hideBreaks  gt  for demonstration  lt  html gt

User · Answer

Just put a unicode newline character within the before pseudo element    restart before   content    00000A

User · Answer

It s possible using the  A escape sequence in the psuedo-element generated content  Read more in the CSS2 spec    restart before   content    A       You may also need to add white-space pre  to  restart   note   A denotes the end of a line   p s  Another treatment to be    before   content       display  block

User · Answer

There are two reasons why you cannot add generated content via CSS in the way you want    generated content accepts content and not markup   Markup will not be evaluated but displayed only   before and  after generated content is added within the element  so even adding a space or letter and defining it as block will not work    There is an   outside pseudo element that might do what you want   However  there appears to be no browser support    Read more here  http   www w3 org TR css3-content  wrapping   Best bet is use a bit of jQuery here       lt br   gt    insertBefore   restart      Example  http   jsfiddle net jasongennaro sJGH9 1

User · Answer

Add a margin-top 20px  to  restart  Or whatever size gap you feel is appropriate  If it s an inline-element you ll have to add display block or display inline-block although I don t think inline-block works on older versions of IE

User · Answer

Following CSS worked for me      newline before element     myelementId before      content   a       white-space  pre

User · Answer

This works for me    restart before       content           clear  right      display  block

User · Answer

Try the following    restart  before     content        display  block

User · Answer

If  restart is an inline element  eg  lt span gt    lt em gt  etc  then you can turn it into a block element using    restart   display  block      This will have the effect of ensuring a line break both before and after the element   There is not a way to have CSS insert something that acts like a line break only before an element and not after  You could perhaps cause a line-break before as a side-effect of other changes  for example float  left  or clear  left after a floated element  or even something crazy like  restart before   content   a load of non-breaking spaces     but this probably isn t a good idea in the general case

[css] How to insert a line break before an element using CSS

Examples related to css