Reputation: 1791
I do not have access to the HTML or PHP for a page and can only edit via CSS. I've been doing modifications on a site and adding text via the ::after
or ::before
pseudo-elements and have found that escape Unicode should be used for things such as a space before or after the added content.
How do I add multiple lines in the content
property?
In example the HTML break line element is only to visualize what I would like to achieve:
#headerAgentInfoDetailsPhone::after {
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
Upvotes: 168
Views: 219512
Reputation: 59849
The content
property states:
Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property. See "Strings" and "Characters and case" for more information on the "\A" escape sequence.
So you can use:
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
When escaping arbitrary strings, however, it's advisable to use \00000a
instead of \A
, because any number or [a-f]
character followed by the new line may give unpredictable results:
function addTextToStyle(id, text) {
return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}
Upvotes: 315
Reputation: 402
Add line break to ::after
or ::before
pseudo-element content
.yourclass:before {
content: 'text here first \A text here second';
white-space: pre;
}
Upvotes: 2
Reputation: 6887
Nice article explaining the basics (does not cover line breaks, however).
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
If you need to have two inline elements where one breaks into the next line within another element, you can accomplish this by adding a pseudo-element :after with content:'\A' and white-space: pre
HTML
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
.label:after {
content: '\A';
white-space: pre;
}
Upvotes: 40
Reputation: 1496
<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>
The .mbr and .dbr classes can simulate line-break behavior using CSS display:table. Useful if you want to replace real <br />.
Check out this demo Codepen: https://codepen.io/Marko36/pen/RBweYY,
and this post on responsive site use: Responsive line-breaks: simulate <br /> at given breakpoints.
Upvotes: 1
Reputation: 1290
For people who will going to look for 'How to change dynamically content on pseudo element adding new line sign" here's answer
Html chars like
will not work appending them to html using JavaScript because those characters are changed on document render
Instead you need to find unicode representation of this characters which are U+000D and U+000A so we can do something like
var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);
div:before{
content: attr(text);
white-space: pre;
}
<div text='I want to break it in javascript, after comma sign'></div>
Hope this save someones time, good luck :)
Upvotes: 10
Reputation: 1096
I had to have new lines in a tooltip. I had to add this CSS on my :after :
.tooltip:after {
width: 500px;
white-space: pre;
word-wrap: break-word;
}
The word-wrap seems necessary.
In addition, the \A didn't work in the middle of the text to display, to force a new line.
worked. I was then able to get such a tooltip :
Upvotes: 16
Reputation: 40990
You may try this
#headerAgentInfoDetailsPhone
{
white-space:pre
}
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
}
Upvotes: 11
Reputation: 10190
Found this question here that seems to ask the same thing: Newline character sequence in CSS 'content' property?
Looks like you can use \A
or \00000a
to achieve a newline
Upvotes: 1