How to insert a line break before an element using CSS

Css Problem Overview

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 Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

This works for me:

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

Solution 4 - Css

Following CSS worked for me:

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

Solution 5 - Css

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

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

Solution 6 - Css

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/

Solution 7 - Css

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/

Solution 8 - Css

Try the following:

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

Solution 9 - Css

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>

Solution 10 - Css

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

Solution 11 - Css

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.

Solution 12 - Css

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

Solution 13 - Css

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.

Solution 14 - Css

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.

Solution 15 - Css

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.

Content Type	Original Author	Original Content on Stackoverflow
Question	mheavers	View Question on Stackoverflow
Solution 1 - Css	bookcasey	View Answer on Stackoverflow
Solution 2 - Css	bobince	View Answer on Stackoverflow
Solution 3 - Css	hutorny	View Answer on Stackoverflow
Solution 4 - Css	rluks	View Answer on Stackoverflow
Solution 5 - Css	Jesse Kinsman	View Answer on Stackoverflow
Solution 6 - Css	Jason Gennaro	View Answer on Stackoverflow
Solution 7 - Css	mw1	View Answer on Stackoverflow
Solution 8 - Css	user	View Answer on Stackoverflow
Solution 9 - Css	JackHammer	View Answer on Stackoverflow
Solution 10 - Css	Kareem	View Answer on Stackoverflow
Solution 11 - Css	Roger	View Answer on Stackoverflow
Solution 12 - Css	Henry Gibson	View Answer on Stackoverflow
Solution 13 - Css	Mark Stewart	View Answer on Stackoverflow
Solution 14 - Css	andy4thehuynh	View Answer on Stackoverflow
Solution 15 - Css	punkrockbuddyholly	View Answer on Stackoverflow