伪元素内容中属性文本的换行符

Question

使用 content: attr(attribute-name) 可以添加伪元素（:before 或 :after），其中包含来自元素属性的文本内容。除此之外，伪元素的 content 属性也允许通过伪元素内容中的 \A 字符换行：

content: attr(attribute-name1) '\a' attr(attribute-name2)

我现在想要的是能够在包含多行文本的单个属性的值内控制换行符的位置和存在。文本由用户定义，因此不受我控制。

元素：

<span data-usertext="Some random text with \a some newlines"/>

CSS:

span:after {
  content: attr(data-usertext);
  white-space: pre;
}

遗憾的是，这不起作用：\a 被打印出来，就好像它是一个简单的字符序列一样。出于好奇，我也尝试了 \r、\n 和 <br />。

如何在不使用 Javascript 的情况下从这样解释的属性中获取换行符？

A fiddle 我以前试过：https://jsfiddle.net/dWkdp/3039/

Answer 1

当使用 HTML 时，您需要考虑换行 
 而不是 CSS 使用的 \A。您还需要添加 white-space:pre

span:after {
  content: attr(data-usertext);
  white-space:pre;
}

<span data-usertext="Some random text with &#10; some newlines"></span>

您也可以这样做：

span:after {
  content: attr(data-usertext);
  white-space:pre;
}

<span data-usertext="Some random text with &NewLine; some newlines"></span>

Newlines from attribute text in pseudo element's content