How to jump a line with css?

Question

I want to add text to a div by using css code (and not directly in the html page). I want to add a sentence in a div (class = title) but I want to jump a line in this sentence at some point.

My css is:

.title
{
  visibility: hidden;
}
.title: after
{  
  content: "Part 1 Part 2";
  visibility: visible;
  margin-left: -220px;
}

I would like to jump a line between Part 1 and Part 2. I thought maybe it worked by using something like \n or \a but it didn't work.

Thank you,

Best Regards

Answer 1

Use white-space: pre-wrap;

Check out this fiddle.

Here is the snippet.

.title {
  visibility: hidden;
}
.title:after {
  content: "Part 1 \A Part 2";
  visibility: visible;
  white-space: pre-wrap;
}

<div class="title"></div>