A． 使用選擇器來插入內容 h2:before{ content:"首碼"; } h2:after{ content:"尾碼"; } B． 指定個別的元素不進行插入 h2.sample:before{ content:none; } 2. 插入圖像 A． 在標題前插入圖像文件 h2:before{ ...
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． 多個標題前加入連續編號
div:before{
content:counter(divCounter);
}
div{
counter-increment:divCounter;
}
B． 在項目符號中追加文字
div:before{
content:"第"counter(divCounter)"段";
}
C． 指定編號樣式、種類
div:before{
content:counter(divCounter,upper-alpha)'.';
color:blue;
font-size:16px;
}
D． 編號嵌套
div:before{
content:counter(divCounter,upper-alpha)'.';
color:blue;
font-size:16px;
}
div{
counter-increment:divCounter;
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繼承
