content和attr表達式铅歼，它們能在你的頁面下面悄悄的使用CSS來生成內(nèi)容，下面讓我們看看attr和content如何相互配合產(chǎn)生神奇效果的早歇。
1.基本content用法
content屬性能讓程序員使用CSS往頁面元素里填寫內(nèi)容：
.myDiv:after { content: "我是一個使用*content*屬性生產(chǎn)的靜態(tài)文字"; }
請注意娃豹，如果想讓偽元素:after絕對定位，你必須對你的div設(shè)置position: relative骏融。
2.content和attr配合使用
如果你不想把content內(nèi)容在CSS里寫死链嘀，那你可以使用attr表達式來從頁面元素中動態(tài)的獲取內(nèi)容：
/* <div data-line="1"></div> */ div[data-line]:after { content: attr(data-line); /* 屬性名稱上不要加引號！ */ }
attr屬性通常和自定義屬性data-配合使用档玻，因為傳統(tǒng)的其它屬性雖然也能存值怀泊，但通常不適合存放表達性文字。
3.content里的字符串連接操作
這種字符串連接很像常規(guī)編程語言了：
/* <div data-line="1"></div> */ div[data-line]:after { content: "[line " attr(data-line) "]"; }
還需要用JavaScript里拼裝字符串嗎误趴？CSS3里就能完成這些霹琼，是不是感覺CSS3可以部分的替代Javascript了！attr的動態(tài)生成頁面內(nèi)容的能力著實是一件讓人興奮的事情凉当。你實際上可以用它配合content對頁面的很多其他元素和屬性進行操作枣申。
