Html 使用属性选择器在CSS伪元素中使用换行符

所以我一直在尝试在after元素中换行，我遇到了（我认为）一个有趣的怪癖

#fourth figcaption:before
{
   content: 'Figure \A' attr(title) ' ';
   white-space: pre-wrap;  
}

这是我希望的工作方式，我在属性中的内容之前得到一个换行符

但是，当我完全从属性获取内容时，换行符停止渲染

#fifth figcaption:before
{
   content: attr(title);
   white-space: pre-wrap;  
}

你可以在这里看到这个>

---

有人知道这会有什么不同吗？提前感谢。

如果您使用的是

\A

或

\A

或任何与HTML属性值类似的值，则这些值只是一个静态值。在CSS中使用如下内容不会为

内容

属性解析此类语法

<div data-stuff="Hello \a World"></div>

如果要从CSS中添加换行符，则需要在样式表中声明

\A

，而不是HTML属性。因此，类似

content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */

---

很抱歉，如果我将

空白

替换为

display:block，我不太明白这里的问题，工作正常。我想我挂错了小提琴。等一下。我现在已经链接到正确的演示。哦，明白了，你的期望不正确。对于CSS，它从属性中获得的任何值都只是一个静态值。您不能仅使用
attr（）
解析该字符串。因此，如果使用
\a\a
，它将作为文本打印。
content: attr(title) '\A World'; /* works now, as your \A will be parsed by CSS */