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

Question

所以我一直试图在after元素中得到一个换行符，并且我遇到了（我认为）是一个有趣的怪癖。

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

这工作如何，我想和我在属性的内容之前得到一个换行符。

如何从内存中完全取得内容停止渲染。

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

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

有谁知道为什么会有所作为？提前致谢。

Answer 1

如果您正在使用\A或\a或任何类似于HTML属性的值，那么它只是一个静态值。使用像在你的CSS下面如果你想从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. 
*/ 

解析这样的语法，你需要在申报\A您样式表而不是HTML属性。因此，像

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