CODEWITHSUNDEEP
csspseudo-element
elkdee
elkdee

Reputation: 1791

Add line break to ::after or ::before pseudo-element content

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

Answers (8)

Adrift
Adrift

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 */
}

http://jsfiddle.net/XkNxs/

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

Ashar Zafar
Ashar Zafar

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

underscore
underscore

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

marko-36
marko-36

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

Szymon
Szymon

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 &#13;&#10; 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

C&#233;dric NICOLAS
C&#233;dric NICOLAS

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. 

 &#13;&#10;

worked. I was then able to get such a tooltip :

enter image description here

Upvotes: 16

Sachin
Sachin

Reputation: 40990

You may try this

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

Js Fiddle

Upvotes: 11

Dryden Long
Dryden Long

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

Related Questions