DEV Community

Cover image for How to jump a line inside CSS pseudo-elements content
Julien Maury
Julien Maury

Posted on • Originally published at blog.julien-maury.dev

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"
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)