How to insert a line break before an element using 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; }
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;
}