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, Sep 09 '11 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, Feb 05 '13 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, May 23 '15 at 20:37

score 304 · Accepted Answer · edited Sep 09 '16 at 09:57

304

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 09 '16 at 09:57

Nam G VU

33,193
69
233
372

answered Aug 01 '12 at 00:33

bookcasey

39,223
13
77
94

13

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

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

This didn't work for me, I used `:before { content: ' '; display: block; }` instead. – Bogdanio Jun 24 '15 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 `
` in the HTML. – Adam Reis Jun 10 '16 at 02:25
5

If the line didn't break, you can to use the 'white-space' property :before { content: '\A'; white-space: pre; } – Amr Oct 26 '16 at 04:37
:before { content: ' '; display: block; } worked great in my case. Thanks! – Tobias Gaertner Apr 29 '23 at 09:28

score 41 · Answer 2 · answered Sep 09 '11 at 15:21

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 09 '11 at 15:21

bobince

528,062
107
651
834

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 Sep 09 '11 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 Sep 09 '11 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 Jan 30 '14 at 18:45

score 22 · Answer 3 · answered Nov 07 '13 at 18:49

22

This works for me:

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

answered Nov 07 '13 at 18:49

hutorny

863
11
17

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

Yes, but what happens when you have to put text inside the content too!? [answer](https://stackoverflow.com/a/11750985/2817442) – iorgv Jun 01 '17 at 00:39

score 17 · Answer 4 · answered Oct 07 '17 at 13:49

17

Following CSS worked for me:

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

answered Oct 07 '17 at 13:49

rluks

2,762
8
38
56

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

score 11 · Answer 5 · edited Jun 22 '22 at 14:04

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 '22 at 14:04

Andy

4,783
2
26
51

answered Apr 19 '13 at 05:06

Jesse Kinsman

732
2
7
20

This does not seem to work – Andy Jun 22 '22 at 14:05

score 11 · Answer 6 · answered Sep 09 '11 at 15:39

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, Mar 05 '15 at 13:05

score 6 · Answer 7 · answered Apr 18 '13 at 21:13

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 '13 at 21:13

mw1

1,482
1
11
18

+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 Oct 10 '13 at 00: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 Jun 22 '22 at 14:19

score 3 · Answer 8 · edited Dec 03 '14 at 23:21

3

Try the following:

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

edited Dec 03 '14 at 23:21

Fizzix

23,679
38
110
176

answered Dec 03 '14 at 22:56

user

23,260
9
113
101

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

score 2 · Answer 9 · answered Nov 27 '17 at 14:39

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 '17 at 14:39

JackHammer

458
1
3
16

score 1 · Answer 10 · answered Mar 10 '16 at 12:33

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 '16 at 12:33

Kareem

5,068
44
38

score 1 · Answer 11 · answered Jun 07 '16 at 14:37

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.

score 1 · Answer 12 · answered Jul 06 '16 at 09:55

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 06 '16 at 09:55

Henry Gibson

2,038
2
15
12

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 Aug 17 '23 at 21:06

score 0 · Answer 13 · answered Jun 14 '19 at 18:32

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.

score 0 · Answer 14 · answered Jun 28 '23 at 05:26

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.

score -1 · Answer 15 · answered Oct 02 '13 at 21:16

-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 02 '13 at 21:16

andy4thehuynh

2,042
3
27
37

2

OP asked for equivallent of `
`, not `
`. – Beni Cherniavsky-Paskin May 25 '14 at 17:42

score -2 · Answer 16 · answered Sep 09 '11 at 15:15

-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 09 '11 at 15:15

punkrockbuddyholly

9,675
7
36
69

No the problem is that the element's display type is inline-block, so I need to have a break before the element. – mheavers Sep 09 '11 at 15:17
the display type is already inline-block. I'm trying to do what I asked above, using the content property. – mheavers Sep 09 '11 at 15:20
You can't add html elements using the content property, it's not possible. – punkrockbuddyholly Sep 09 '11 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 Sep 11 '14 at 11:56

How to insert a line break before an element using CSS

16 Answers16

Linked

Related