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