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

Question

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 ';
}

CSS is not for adding or editing content, it is for controlling how content displays — underscore, Jun 11 '13 at 15:19
@SamithaHewawasam While I agree with your statement, it looks like the poster has found themselves in a situation where they cannot edit the HTML. For small, simple content additions, I can see why this would be useful/necessary. — Dryden Long, Jun 11 '13 at 15:22
possible duplicate of [Newline character sequence in CSS 'content' property?](http://stackoverflow.com/questions/9062988/newline-character-sequence-in-css-content-property) — cimmanon, Jun 11 '13 at 15:27
possible duplicate of [How to insert a line break before an element using CSS](http://stackoverflow.com/questions/7363766/how-to-insert-a-line-break-before-an-element-using-css) — user, Dec 03 '14 at 22:29
I would also argue that line breaks are far more format-related than content related. The only way you "see" a line break is by observing a format change in the content. — Isochronous, Apr 21 '15 at 19:35
unfortunately it doesn't work if content is filled from an attr (`content:attr('data-message')`) — rupps, Jul 21 '18 at 15:56

score 306 · Accepted Answer · edited Apr 15 '20 at 10:55

306

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')} }"`;
}

edited Apr 15 '20 at 10:55

David Avsajanishvili

7,678
2
22
24

answered Jun 11 '13 at 15:21

Adrift

58,167
12
92
90

36

For a moment I thought "why `\A` and not `\n`" - then I remembered newline is `0x0A` :) – Camilo Martin Jul 29 '16 at 10:49
I tried this in with print media query, it doesn't work. is it a bug or it is the default behaviour? Without print media, it works. – harryfeng May 09 '17 at 13:28
1

Thanks for mentioning `pre-wrap`! I was having problems with `#headerAgentInfoDetailsPhone` **not wrapping any more in Blink engine web browsers like Chrome.** Firefox is not susceptible to the `white-space: pre;` property propagating back up to the element. – Serge Stroobandt Aug 14 '17 at 13:50
Babel is giving me `The only valid numeric escape in strict mode is '\0'` – Dmitry Shvedov Feb 12 '21 at 05:09

score 36 · Answer 2 · edited Sep 03 '18 at 12:18

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;
}

Cédric NICOLAS · Answer 3 · 2016-01-21T00:12:56.990

14

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 :

edited Jan 21 '16 at 00:12

answered Jan 21 '16 at 00:07

Cédric NICOLAS

1,006
2
12
24

This is the only one that seems to work when using `content: attr(data-tooltip);` and `` – Guillaume Apr 06 '23 at 09:54

score 11 · Answer 4 · edited Jun 11 '13 at 17:00

11

You may try this

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

Js Fiddle

edited Jun 11 '13 at 17:00

Hemerson Varela

24,034
16
68
69

answered Jun 11 '13 at 15:20

Sachin

40,216
7
90
102

score 10 · Answer 5 · answered Jul 03 '18 at 09:27

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 :)

score 2 · Answer 6 · edited Jan 26 '19 at 22:04

2

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

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

edited Jan 26 '19 at 22:04

martoncsukas

2,077
20
23

answered Jun 13 '18 at 09:52

Ashar Zafar

382
2
11

score 1 · Answer 7 · edited May 23 '17 at 11:47

1

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

edited May 23 '17 at 11:47

Community

1
1

answered Jun 11 '13 at 15:19

Dryden Long

10,072
2
35
47

score 1 · Answer 8 · answered Jul 10 '18 at 19:22

1

<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.

answered Jul 10 '18 at 19:22

marko-36

1,309
3
23
38

Asked for a CSS not HTML solution. – evavienna Jan 24 '22 at 06:39
1

But if someone else was searching for "Add line break to ::after or ::before pseudo-element content" and landed here, but actually could edit his HTML, they might this helpful, right? – marko-36 Jan 25 '22 at 08:56

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

8 Answers8

Linked

Related