属性セレクタを使ったCSS擬似要素の改行

Question

私はafter要素で改行を取ろうとしていましたが、私が驚いたのは興味深いものです。

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

これはどのようにして動作し、属性からのコンテンツの前に改行を取得します。

コンテンツをattrから完全に取得する方法は、改行を停止するとレンダリングが停止します。

#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から改行を追加したい場合は、あなたの中に\Aを宣言する必要があなたのcontentプロパティの

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

よう

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

とCSSを、このような構文を解析しませんHTML属性ではなく、スタイルシートです。したがって、

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