How can I add a line break to a string in CSS? - css

Question

I'm trying to customize a web page for the company I work for. they give the option o use custom css to edit. They don't give the HTML, if you ask how to edit something they will provide the specific code. they provided the below code, and I'm trying to figure out how to insert a line break in the first text string. any ideas?
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed h1:after {
content: 'THANK YOU FOR APPLYING. WE WILL GET BACK TO YOU SHORTLY.';
float: left;
text-indent: 0;
width: 100%;
}
.landing .confirmation-container .application-confirmed p {
overflow: hidden;
text-indent: -10000px;
}
.landing .confirmation-container .application-confirmed p:after {
content: 'If you did not receive a reply email within 48 hours, please check your spam or email us: hiring#example.com';
float: left;
text-indent: 0;
width: 100%;
}

Answer 1

To insert a new line / line break in that content, use the \A escape characters. In order for the new lines to work properly, you also need to set the white-space property to either pre or pre-wrap.
content: "THANK YOU FOR APPLYING. \AWE WILL GET BACK TO YOU SHORTLY.";
white-space: pre-wrap;

Answer 2

The \A escape sequence will insert a line break. It works the same as adding a < br /> tag to your HTML.
content: 'THANK YOU FOR APPLYING.\A WE WILL GET BACK TO YOU SHORTLY.';

Answer 3

You can use content:"\a" and white-space: pre to create a line break without adding a <br/> tag to your HTML
It works like this:
.landing .confirmation-container .application-confirmed h1 {
display:inline;
}
.landing .confirmation-container .application-confirmed h1:before {
content:"\a";
white-space: pre;
}
Example:
h1 {
display:inline;
}
h1:before {
content:"\a";
white-space: pre;
}
<h1>Header</h1>
\a means line break (character U+000A)
white-space: pre tells browsers to treat it as a line break in rendering.