1.背景介紹
content屬性早在CSS2.1的時(shí)候就被引入了,可以使用:before以及:after偽元素生成內(nèi)容鲁猩。此特性目前已被所有主流瀏覽器支持坎怪。
在CSS 3 Generated Content工作草案中,content屬性添加了更多的特征绳匀,例如:插入以及移除文檔內(nèi)容的能力芋忿,以創(chuàng)建腳注炸客,結(jié)語疾棵,及段落注釋。但是目前還沒有瀏覽器支持content的擴(kuò)展功能痹仙。
2.知識(shí)剖析
1.content屬性與 :before 及 :after 偽元素配合使用生成文本內(nèi)容
2.通過attr()將選擇器對(duì)象的屬性作為字符串進(jìn)行顯示
3.用計(jì)數(shù)器為文檔添加序號(hào)
css代碼:
html代碼:
效果:
3.常見問題
如何為不同的語言使用不同的標(biāo)點(diǎn)符號(hào)是尔?
4.解決方案
使用content可以使得不同的語言使用對(duì)應(yīng)的一些字符。
5.編碼實(shí)戰(zhàn)
詳見視頻:
css中content屬性_騰訊視頻
6.擴(kuò)展思考
content實(shí)際上很少的使用开仰,它不可通過DOM使用拟枚,它只是純粹的表象薪铜。
7.參考文獻(xiàn)
參考一:segmentfault上的css3 content詳解
參考二:張?chǎng)涡?CSS content內(nèi)容生成技術(shù)以及應(yīng)用
參考三:CSS counter計(jì)數(shù)器
8.更多討論
1、content是否可以添加圖片恩溅?
2隔箍、content什么時(shí)候使用?
3脚乡、偽類和偽元素的區(qū)別蜒滩?