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

Question

因此，我一直试图在后续元素中进行换行，而且我遇到了（我认为）这是一个有趣的怪癖。

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

这就是我喜欢的方式，我在属性的内容之前得到换行符。

当我完全从attr获取内容时，断行停止渲染。

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

你可以在这里看到＆gt; http://jsbin.com/huyaxifomo/edit?html,css,output

有谁知道为什么会产生影响？提前谢谢。

Answer 1

如果您使用\A或\a或任何类似的HTML属性值只是一个静态值。在CSS中使用以下内容不会解析content属性

的语法

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

和CSS一样

content: attr(title); 
/* 
   This will not parse \a as a line break and would rather treat it as 
   a string.
*/

如果要从CSS添加换行符，则需要在样式表中声明\A，而不是HTML属性。因此，像

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