content和attr表達式，它們能在你的頁面下面悄悄的使用CSS來生成內容，下面讓我們看看attr和content如何相互配合產生神奇效果的。

1.基本content用法

content屬性能讓程序員使用CSS往頁面元素里填寫內容：

.myDiv:after { content: "我是一個使用*content*屬性生產的靜態文字"; }

請注意，如果想讓偽元素:after絕對定位，你必須對你的div設置position: relative。

2.content和attr配合使用

如果你不想把content內容在CSS里寫死，那你可以使用attr表達式來從頁面元素中動態的獲取內容：

/* <div data-line="1"></div> */ div[data-line]:after { content: attr(data-line); /* 屬性名稱上不要加引號！ */ }

attr屬性通常和自定義屬性data-配合使用，因為傳統的其它屬性雖然也能存值，但通常不適合存放表達性文字。

3.content里的字符串連接操作

這種字符串連接很像常規編程語言了：

/* <div data-line="1"></div> */ div[data-line]:after { content: "[line " attr(data-line) "]"; }
還需要用JavaScript里拼裝字符串嗎？CSS3里就能完成這些，是不是感覺CSS3可以部分的替代Javascript了！attr的動態生成頁面內容的能力著實是一件讓人興奮的事情。你實際上可以用它配合content對頁面的很多其他元素和屬性進行操作。