SCSS - Special line break character in content attribute

Question

I'm using .scss files and compile them.
I have an element with the following css rule:

content: attr(data-tooltip) attr(data-tooltip);

I'd like to add a line break in the content attribute using '\A' but it doesn't work.
When I use this rule:

content: attr(data-tooltip) '\A' attr(data-tooltip);

it prints the data with a single 'A' char instead of a line break.

When I use this rule:

content: attr(data-tooltip) '\\A' attr(data-tooltip);

it prints the content and a '\\A' instead of a line break.

When I change the content in the developer console to

content: attr(data-tooltip) '\A' attr(data-tooltip);

it prints a line break as wanted.

How can I make it add a line break using css?

EDIT: This element also has white-space: pre-wrap; rule.

EDIT: Seems like it's a know issue of css loader.

try `content: attr(data-tooltip) ' ' attr(data-tooltip);` or `content: attr(data-tooltip) ' ' attr(data-tooltip);` — Nikhil Nanjappa, Oct 27 '16 at 14:18
Not sure it's a duplicate because I'm using a compiler and the question you posted doesn't; — Sharon Haim Pour, Oct 27 '16 at 14:18
@SharonHaimPour it doesn't matter, SCSS doesn't change it at all — Jacob G, Oct 27 '16 at 14:19
Which tool are you using to compile? in sassmeister works fine: http://www.sassmeister.com/gist/c8125ed4b7e35132c175a390d36fbf89 — , Oct 27 '16 at 14:24

connexo · Answer 1 · 2016-10-27T14:26:14.957

0

[data-tooltip]:after {
  content: attr(data-tooltip) '\A' attr(data-tooltip);
  white-space: pre-wrap;
}

<div data-tooltip="some tooltip text">The DIV</div>

Use

white-space: pre-wrap;

along with your \A.

edited Oct 27 '16 at 14:26

answered Oct 27 '16 at 14:18

connexo

Forgot to mention I'm using it. Adding it now. – Sharon Haim Pour Oct 27 '16 at 14:19
You do know that `content` afaik is only available on pseudo elements? – connexo Oct 27 '16 at 14:21
Added a snippet showcasing it's working. – connexo Oct 27 '16 at 14:27
Your snippet works, but it doesn't work for me. – Sharon Haim Pour Oct 27 '16 at 14:47

1 Answers1