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: '<br/>'; }

But how do you do this?

CSS is not for adding or editing content, it is for controlling how content displays. — Todd Moses, Commented Sep 9, 2011 at 15:26
It seems to me that layout and flow (line breaks could be considered either) are definitely within the domain of CSS. — Trevor, Commented Feb 5, 2013 at 23:26
CSS is absolutely for adding or editing content when it is a consistent styling element that is a part of your theme. Especially with content management systems like Wordpress that do not allow you to edit your content, its highly useful. That's why the "content" property exists. For adding and/or editing content. — Fei Lauren, Commented May 23, 2015 at 20:37

Nam G VU · Accepted Answer · 2016-09-09 09:57:29Z

311

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; }

edited Sep 9, 2016 at 9:57

Nam G VU

34.6k78 gold badges240 silver badges384 bronze badges

answered Aug 1, 2012 at 0:33

bookcasey

40k13 gold badges80 silver badges94 bronze badges

13

Also try white-space: pre-wrap; if you want your text to wrap.
– Jazzy
Commented Aug 16, 2013 at 21:40
6

Brilliant. It should be noted, though, that for this to work - #restart must also be display: inline;
– Troy Alford
Commented Aug 21, 2013 at 5:02
27

This didn't work for me, I used :before { content: ' '; display: block; } instead.
– Bogdanio
Commented Jun 24, 2015 at 13:34
2

For some reason none of the solutions work with inline-block elements. They simply won't go onto the next line. Only solution was to actually append an empty <div></div> in the HTML.
– Adam Reis
Commented Jun 10, 2016 at 2:25
5

If the line didn't break, you can to use the 'white-space' property :before { content: '\A'; white-space: pre; }
– Amr
Commented Oct 26, 2016 at 4:37

| Show 1 more comment

bobince · Accepted Answer · 2011-09-09 15:21:47Z

41

If #restart is an inline element (eg <span>, <em> 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.

answered Sep 9, 2011 at 15:21

bobince

534k109 gold badges665 silver badges840 bronze badges

1

It can't be display:block - because then I would need to display a width for the element to keep its background from running all the way across the page. It needs to be able to auto set the width for the element.
– mheavers
Commented Sep 9, 2011 at 15:25
3

A float: left element might be of some use, as they shrink-to-fit and start on a new line. Otherwise, what you want may not be possible.
– bobince
Commented Sep 9, 2011 at 16:43
downvoted cause sometimes developers work in a big project where they don't have control or cannot take a decision to apply another solution.
– eyurdakul
Commented Jan 30, 2014 at 18:45

Add a comment |

hutorny · Accepted Answer · 2013-11-07 18:49:13Z

22

This works for me:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

answered Nov 7, 2013 at 18:49

hutorny

87311 silver badges17 bronze badges

For some reason, the various unicode characters for new line were not working for me .. ? This solution did the trick though - thanks!
– Gene Bo
Commented Nov 6, 2014 at 18:45
1

Yes, but what happens when you have to put text inside the content too!? answer
– iorgu
Commented Jun 1, 2017 at 0:39

Add a comment |

rluks · Accepted Answer · 2017-10-07 13:49:37Z

18

Following CSS worked for me:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

answered Oct 7, 2017 at 13:49

rluks

2,8528 gold badges39 silver badges58 bronze badges

Excellent idea with plain css
– Naveen DA
Commented Dec 9, 2017 at 5:14
Worked as a charm for me. I'm using this: content: 'bar: \a' attr(data-description);
– Jimmy Adaro
Commented Jul 13, 2018 at 18:49

Add a comment |

Jason Gennaro · Accepted Answer · 2011-09-09 15:39:41Z

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:

$('<br />').insertBefore('#restart');

Example: http://jsfiddle.net/jasongennaro/sJGH9/1/

"Using CSS". I found an answer similar to Jesse Kinsman's worked. — RonnyKnoxville, Commented Mar 5, 2015 at 13:05

Andy · Accepted Answer · 2022-06-22 14:04:28Z

11

Just put a unicode newline character within the before pseudo element:

    #restart::before { content: '\00000A'; }

<p>
  The quick brown fox
  <span id="restart">jumps over the lazy dog</span>
</p>

edited Jun 22, 2022 at 14:04

Andy

5,8112 gold badges31 silver badges51 bronze badges

answered Apr 19, 2013 at 5:06

Jesse Kinsman

7622 gold badges8 silver badges20 bronze badges

This does not seem to work
– Andy
Commented Jun 22, 2022 at 14:05

Add a comment |

mw1 · Accepted Answer · 2013-04-18 21:13:21Z

6

Yes, totally doable but it is definitely a total hack (people may give you dirty looks for writing such code).

Here is the HTML:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

Here is the CSS:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

Here is the fiddle: http://jsfiddle.net/AprNY/

answered Apr 18, 2013 at 21:13

mw1

1,4921 gold badge11 silver badges18 bronze badges

+1 For creativity. I've got something that I'm including from an external source and can't alter the actual HTML... this appears to work just fine :) Thanks!
– counterbeing
Commented Oct 10, 2013 at 0:40
Due to font-size: 0 this is even hidden from screen readers, and does not seem to split up contents in several parts that are read separately.
– Andy
Commented Jun 22, 2022 at 14:19

Add a comment |

Fizzix · Accepted Answer · 2014-12-03 23:21:09Z

3

Try the following:

#restart::before {
  content: '';
  display: block;
}

edited Dec 3, 2014 at 23:21

Fizzix

24.2k40 gold badges115 silver badges179 bronze badges

answered Dec 3, 2014 at 22:56

user

24.9k11 gold badges114 silver badges104 bronze badges

A tip: Add at least a one-liner comment, so your posts don't end up in the VLQQ by default.
– Deduplicator
Commented Dec 3, 2014 at 23:19

Add a comment |

JackHammer · Accepted Answer · 2017-11-27 14:39:30Z

2

You can populate your document with <br> tags and turn them on\off with css just like any others:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

answered Nov 27, 2017 at 14:39

JackHammer

4581 gold badge3 silver badges17 bronze badges

Add a comment |

qɐʇǝɥɐW · Accepted Answer · 2023-06-28 05:26:13Z

To add a new line before text using CSS, you can use the ::before pseudo-element along with the content property and set it to "\A" which represents a line break. Here's an example:

.myElement::before {
  content: "\A";
  white-space: pre;
}

In the above code, .myElement represents the selector for the element to which you want to add a new line before the text. The ::before pseudo-element inserts content before the element's content. The content property is set to "\A", which represents a line break. The white-space: pre; property is used to preserve the white space, including the line break.

You can adjust the selector (.myElement) as per your specific element's class or ID, and you can apply this CSS to any element where you want to add a new line before the text.

Kareem · Accepted Answer · 2016-03-10 12:33:58Z

1

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;
  }

answered Mar 10, 2016 at 12:33

Kareem

5,32647 silver badges40 bronze badges

Add a comment |

Roger · Accepted Answer · 2016-06-07 14:37:01Z

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

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

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.

Henry Gibson · Accepted Answer · 2016-07-06 09:55:50Z

1

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

answered Jul 6, 2016 at 9:55

Henry Gibson

2,0382 gold badges15 silver badges12 bronze badges

This is the only solution that worked for me when content: attr() is used and the attribute text contains the line break (noting that white-space: pre-wrap or similar is also still necessary).
– Shoelaced
Commented Aug 17, 2023 at 21:06

Add a comment |

Mark Stewart · Accepted Answer · 2019-06-14 18:32:25Z

0

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.

answered Jun 14, 2019 at 18:32

Mark Stewart

1

Add a comment |

andy4thehuynh · Accepted Answer · 2013-10-02 21:16:43Z

-1

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-<side> of whichever side you specify.

answered Oct 2, 2013 at 21:16

andy4thehuynh

2,1623 gold badges27 silver badges39 bronze badges

2

OP asked for equivallent of <br>, not <hr>.
– Beni Cherniavsky-Paskin
Commented May 25, 2014 at 17:42

Add a comment |

punkrockbuddyholly · Accepted Answer · 2011-09-09 15:15:15Z

-2

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.

answered Sep 9, 2011 at 15:15

punkrockbuddyholly

9,7657 gold badges38 silver badges71 bronze badges

No the problem is that the element's display type is inline-block, so I need to have a break before the element.
– mheavers
Commented Sep 9, 2011 at 15:17
the display type is already inline-block. I'm trying to do what I asked above, using the content property.
– mheavers
Commented Sep 9, 2011 at 15:20
You can't add html elements using the content property, it's not possible.
– punkrockbuddyholly
Commented Sep 9, 2011 at 15:21
because your answer would not have solved his problem. Look at the winning answer which details a way to provide a line break using the content property (which will not accept html elements). Perhaps it was a misunderstanding of the original question.
– pdwalker
Commented Sep 11, 2014 at 11:56

Add a comment |

Collectives™ on Stack Overflow

How to insert a line break before an element using CSS

16 Answers 16

Not the answer you're looking for? Browse other questions tagged
css
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

Not the answer you're looking for? Browse other questions tagged css or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
or ask your own question.