How can I use CSS to insert a line break after but not before an element?

Question

For example:

HTML:

The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.

I want this to display:

The quick brown fox {BREAK}

jumps over the lazy dog.

I looked into the display property, but display:inline; doesn't break anywhere and display:block puts breaks on both sides.

I also looked into the :after pseudo-class, but .break:after{content:"\000A";} ends up rendering as a space, rather than a line feed.

Answer 1

By default, HTML elements ignore whitespace.
You need to change that:

.break:after {
    content:"\000A";
    white-space: pre;
}

Answer 2

http://jsfiddle.net/bMKrc/1/

html:

The quick brown fox <span class="break"></span> jumps over the lazy dog.

CSS:

.break{
    display:block;
}

And that's all you need. display:block may cause it to break on both sides, but it does not cause there to be an extra line. View my fiddle.