推薦課程:CSS3教程
CSS3的出現使樣式表的功能越來越強大，也使開發變得更加容易和方便。尤其是CSS3中的新功能，如過渡、動畫、變換等。，有壹個功能並不那麽引人註目，但非常有用。它是content和attr的表達式，可以悄悄地使用CSS在頁面底部生成內容。讓我們看看attr和內容是如何共同產生神奇效果的。
基本內容使用
內容屬性允許程序員使用CSS在頁面元素中填充內容。
示例:
。myDiv:在{content:“我是使用*content*屬性生成的靜態文本”之後；}請註意，如果您想要絕對定位偽元素:after，則必須為div設置position: relative。
內容和屬性壹起使用。
如果不想將內容死寫在CSS中，可以使用attr表達式從頁面元素中動態獲取內容:
/* & lt；div data-line =“1“& gt；& lt/div & gt；*/
div【data-line】:在{
內容:attr（數據線）；
/*不要在屬性名上加引號！*/ }attr屬性通常與用戶定義的屬性data-壹起使用，因為盡管其他傳統屬性也可以存儲值，但它們通常不適合存儲表達性單詞。
內容中的字符串串聯操作
這種字符串串聯非常類似於傳統的編程語言:
/* & lt；div data-line =“1“& gt；& lt/div & gt；*/
div【data-line】:之後
{ content:“【line“attr（data-line）“】“；}在CSS3中，可以像在JavaScript中壹樣完成字符串拼接，動態生成attr的頁面內容也非常有用。我們可以將它與內容壹起使用來操作頁面的許多其他元素和屬性。
總結: