A. 使用選擇器插入內容
h2:before{ content:"前缀"; } h2:after{ content:"后缀"; }
B. 指定個別的元素不進行插入
h2.sample:before{ content:none; }
2. 插入圖片
A. 在標題前插入圖片檔案
h2:before{ content:url(anwy.jpg); }
B. 將alt屬性的值作為圖像的標題來顯示(用不了)
img:after{ content:attr(alt); display:block; text-align:center; margin-top:5px; font-size:11px; font-weight:bold; color:black; }
3. 插入編號
A#. 多個標題前加入連續編號
p:before{ content:counter(pCounter); } p{ counter-increment:pCounter; }
B. 在項目符號中追加文字
p:before{ content:"第"counter(pCounter)"段"; }
C. 指定編號樣式、類型
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; }
D#. 編號巢狀
p:before{ content:counter(pCounter,upper-alpha)'.'; color:blue; font-size:16px; } p{ counter-increment:pCounter; counter-reset:subDivCounter; } p:before{ content:counter(subDivCounter)'.'; margin-left:15px; font-size:12px; } p{ counter-increment:subDivCounter; }
E. 字串兩邊新增文字巢狀符號
h3:before{ content: open-quote; } h3:after{ content: close-quote; } h3{ quotes:"【""】"; }
disc 點| circle圓圈 | square正方形 | decimal數字 | decimal-leading-zero 十進制數| lower-roman 小寫羅馬文字| upper-roman 大寫羅馬文字| lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數字 | georgian喬治亞數字 | lower-alpha小寫英文字母 | upper-alpha大寫英文字母 | none無 | inherit繼承
以上是怎麼在css3在頁面插入內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!