How to insert a line break before an element using CSS

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?

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

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.

This works for me:

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

Following CSS worked for me:

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

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

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