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