Making content appear below the :before pseudo selector?

Question

I have an element

<div class="Test_then">The result is ...</div>

The Test_then class looks like this:

.Test_then::before {
  content: 'Then';
}

My goal is to have the (The result is ...) appear below the Then content added by the Test_then class. So in other words in would render like this:

Then
The result is ...

It's right there. Well the HTML wasn't there, but the CSS certainly was, and it's fairly hard to miss. — BoltClock, Mar 10 '17 at 06:30

score 1 · Accepted Answer · answered Mar 10 '17 at 06:25

If your generated content simply consists of the word "Then" inline, you can just add a newline with \a, and use white-space: pre-wrap (or pre) to cause the newline to render as an actual line break:

.Test_then::before {
  content: 'Then\a';
  white-space: pre-wrap;
}

An example of this is also provided in the spec.

If your generated content needs to be displayed as a block for any reason, then it becomes even simpler — display: block alone will have the same effect:

.Test_then::before {
  content: 'Then';
  display: block;
}

OK - I know I'm supposed to avoid thanks - but you're awesome - THANKS!! — Ole, Mar 10 '17 at 06:56

Making content appear below the :before pseudo selector?

1 Answers1