1. 程式人生 > >CSS之after與before的content 和 attr 配合使用

CSS之after與before的content 和 attr 配合使用

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對頁面的很多其他元素和屬性進行操作。