CSS 3におけるcontentとattrの使い方

contentとattr式は、あなたのページの下でCSSをこっそり使ってコンテンツを生成することができます.次に、attrとcontentがどのように協力して不思議な効果を生み出すかを見てみましょう.
1.基本contentの使い方
contentプロパティでは、プログラマがCSSを使用してページ要素に内容を記入できます..myDiv:after { content: " *content* "; }
擬似要素:afterを絶対的に位置決めするには、divにposition:relativeを設定する必要があります.
2.contentとattrの併用
コンテンツをCSSで死にたくない場合は、attr式を使用してページ要素からコンテンツを動的に取得できます./* */ div[data-line]:after { content: attr(data-line); /* ！ */ }
attrプロパティは、通常、カスタムプロパティdataと組み合わせて使用されます.従来の他のプロパティも値を保存できますが、通常は表現文字を保存するのに適していません.
3.contentの文字列接続操作
この文字列接続は通常のプログラミング言語に似ています./* */ div[data-line]:after { content: "[line " attr(data-line) "]"; } JavaScriptで文字列をつづる必要がありますか?CSS 3でこれを完成させることができるのは、CSS 3がJavascriptの一部に代わることができると感じているのではないでしょうか.attrのダイナミックなページコンテンツ生成能力は実にワクワクすることである.実際にはcontentと協力してページの多くの他の要素と属性を操作することができます.