Search code examples
csspseudo-elementcss-content

Making content appear below the :before pseudo selector?

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 ...
Solution

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