why attr() don't work here? if I put "\a" CSS

Question

1. I have a code in javascript that generates a string
2. and then that string is placed in an attribute in the HTML tag
3. and then I have a ::after element with content: attr(data-after);

and I saw here Newline character sequence in CSS 'content' property?
that for making <br> like behavior,
I need \a inside the string

I do it manually without attr() and is working fine

content: "hello \a world";
/* output: 
hello
world
*/

but if you get the string from the attribute then it become output: hello world in one line.

I saw that \a is displayed in the attribute, so in the string I putted 2 \\a for escaping the \

but still not going in new line.

document.querySelector("#container").setAttribute("data-after", "lenght: 86.02325267042627 \\a x: 110 \\a y: 100 \\a angle: 54.46232220802561");

#container::after {
  content: attr(data-after);
  white-space: pre;
}

<div id="container"></div>