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?
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 <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
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: //www.w3.org/TR/css3-content/#wrapping)
Best bet is use a bit of jQuery here:
$('<br />').insertBefore('#restart');Example: //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: //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 <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
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; }
//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