How to jump a line inside CSS pseudo-elements content

If you add text inside the content property of a CSS pseudo-element such as :before or :after, you might also want to jump a line. I stumbled uppon the following:

.my-element:before {
    display: block;
    white-space: pre-line;
    content: "line 1 \a\ line 2"
}

Any white-space pre combined with \a\ would work but the white-space: pre-line; is important to avoid an extra-space before "line 2".

I experimented with the trick in this stupid demo, and then I found the explanation in this excellent book by Lea Verou:

Technically, 0x000A corresponds to "Line Feed" characters, which is what we get in JavaScript with "\n".
There is actually a Unicode character that corresponds to line breaks: 0x000A. In CSS, this would be written as "\000A", or more simply "\A"

Photo by Almos Bechtold