A. 使用選擇器插入內容
1 2 3 4 5 6 | h2:before{
content: "前缀" ;
}
h2:after{
content: "后缀" ;
}
|
登入後複製
B. 指定個別的元素不進行插入
1 2 3 | h2.sample:before{
content:none;
}
|
登入後複製
2. 插入圖片
A. 在標題前插入圖片檔案
1 2 3 | h2:before{
content:url(anwy.jpg);
}
|
登入後複製
B. 將alt屬性的值作為圖像的標題來顯示(用不了)
1 2 3 4 5 6 7 8 9 | img:after{
content:attr(alt);
display:block;
text-align:center;
margin-top:5px;
font-size:11px;
font-weight:bold;
color:black;
}
|
登入後複製
3. 插入編號
A#. 多個標題前加入連續編號
1 2 3 4 5 6 | p:before{
content:counter(pCounter);
}
p{
counter-increment:pCounter;
}
|
登入後複製
B. 在項目符號中追加文字
1 2 3 | p:before{
content: "第" counter(pCounter) "段" ;
}
|
登入後複製
C. 指定編號樣式、類型
1 2 3 4 5 | p:before{
content:counter(pCounter,upper-alpha)'.';
color:blue;
font-size:16px;
}
|
登入後複製
D#. 編號巢狀
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | 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. 字串兩邊新增文字巢狀符號
1 2 3 4 5 6 7 8 9 | 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中文網其他相關文章!