How do you put br in 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:

Nội dung chính Show

How do you add a br tag in CSS?
Can you style a BR in CSS?
How do you type a BR tag?
What does BR mean in CSS?

#restart:before { content: '<br/>'; }

But how do you do this?

syb0rg

7,9878 gold badges40 silver badges80 bronze badges

asked Sep 9, 2011 at 15:12

3

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

Nam G VU

31.6k67 gold badges221 silver badges356 bronze badges

answered Aug 1, 2012 at 0:33

bookcaseybookcasey

38k13 gold badges74 silver badges93 bronze badges

5

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

bobincebobince

519k102 gold badges646 silver badges825 bronze badges

3

This works for me:

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

answered Nov 7, 2013 at 18:49

hutornyhutorny

85311 silver badges16 bronze badges

2

Following CSS worked for me:

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

answered Oct 7, 2017 at 13:49

rluksrluks

2,6227 gold badges35 silver badges53 bronze badges

2

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/

answered Sep 9, 2011 at 15:39

Jason GennaroJason Gennaro

34.1k7 gold badges62 silver badges86 bronze badges

1

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>

Andy

3,3462 gold badges22 silver badges44 bronze badges

answered Apr 19, 2013 at 5:06

Jesse KinsmanJesse Kinsman

7121 gold badge7 silver badges20 bronze badges

1

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

mw1mw1

1,4821 gold badge11 silver badges18 bronze badges

2

Try the following:

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

Fizzix

22.8k37 gold badges109 silver badges170 bronze badges

answered Dec 3, 2014 at 22:56

useruser

20.9k9 gold badges110 silver badges98 bronze badges

1

You can populate your document with   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

JackHammerJackHammer

4181 gold badge3 silver badges15 bronze badges

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

KareemKareem

4,65540 silver badges35 bronze badges

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.

answered Jun 7, 2016 at 14:37

RogerRoger

1212 silver badges12 bronze badges

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 GibsonHenry Gibson

1,9682 gold badges14 silver badges12 bronze badges

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

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

andy4thehuynhandy4thehuynh

1,9623 gold badges26 silver badges37 bronze badges

1

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

4

How do you add a br tag in CSS?

How to add a line-break using CSS.

Set the content property to "\a" (the new-line character)..

Set the white-space property to pre . This way, the browser will read every white-space, in myClass , as a white-space..

Can you style a BR in CSS?

Styling with CSS The element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.