Javascript CSS内容规则忽略html元素属性中的换行符（0x0a）

CSS内容规则中的换行符有问题

我生成一个元素并为其指定一个属性“text”。此属性的值将显示在元素pseudoelement

：before

问题是它不会正确显示属性值中包含的新行字符。它以输入的方式显示它们。即：我看到打印的不是一行新行，而是

<div id='foo' class='somediv'>
  foo
</div>

.somediv:after {
  content: attr(text);
  white-space: pre-line;
}

document.getElementById('foo').setAttribute('text', 'world &#x0a hello');

福
.某物之后{
内容：attr（文本）；
空白：行前；
}
document.getElementById（'foo'）.setAttribute（'text'，'world
 hello'）；

小提琴演示：

---

要使其正确显示，我需要做些什么？

您需要应用

空白：行前到元素本身，而不是
：之后的

实际的文本布局是元素的一部分。
在JS中不能使用HTML实体引用。你需要逃跑。使用：

document.getElementById('foo').setAttribute('text', 'world \x0a hello');


document.getElementById（'foo'）.setAttribute（'text'，'world\x0a hello'）
.somediv:after{
内容：attr（文本）；
空白：行前；
}

福
嘿，谢谢你的回答。我刚试过，但没有成功。我更新了小提琴以反映你的建议。