基本content用法
content屬性能讓程序員使用CSS往頁(yè)面元素里填寫(xiě)內(nèi)容:
.myDiv:after { content: "我是一個(gè)使用*content*屬性生產(chǎn)的靜態(tài)文字"; }
請(qǐng)注意,如果想讓偽元素:after絕對(duì)定位践宴,你必須對(duì)你的div設(shè)置position: relative。
content 和 attr 配合使用
如果你不想把content內(nèi)容在CSS里寫(xiě)死逗抑,那你可以使用attr表達(dá)式來(lái)從頁(yè)面元素中動(dòng)態(tài)的獲取內(nèi)容:
/* <div data-line="1"></div> */
div[data-line]:after {
content: attr(data-line); /* 屬性名稱(chēng)上不要加引號(hào)! */
}
attr屬性通常和自定義屬性data-配合使用,因?yàn)閭鹘y(tǒng)的其它屬性雖然也能存值锋八,但通常不適合存放表達(dá)性文字浙于。
content里的字符串連接操作
/* <div data-line="1"></div> */
div[data-line]:after {
content: "[line " attr(data-line) "]";
}