使用屬性選擇器在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 */