content 和 attr 配合使用

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

/* <div data-line="1"></div> */

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

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

content裡的字串連線操作

這種字串連線很像常規程式語言了：

/* <div data-line="1"></div> */

div[data-line]:after { 
	content: "[line " attr(data-line) "]"; 
}
 

還需要用JavaScript裡拼裝字串嗎？CSS3裡就能完成這些，是不是感覺CSS3可以部分的替代Javascript了！ attr的動態生成頁面內容的能力著實是一件讓人興奮的事情。你實際上可以用它配合content對頁面的很多其他元素和屬性進行操作。