插入純文字
content : ”插入的文章”，或者 content:none 不插入內容
#html<h1>這是h1</h1><h2>這是h2</h2>#cssh1::after{ content:"h1後插入內容"}h2::after{ content:none}
嵌入文字元號
可以使用content屬性的 open-quote 屬性值和 close-quote 屬性值在字串兩邊添加諸如括弧、單引號、雙引號之類的嵌套文字元號。open-quote 用於添加開始的文字元號，close-quote 用於添加結束的文字元號。修改上述的css:
h1{ quotes:"(" ")"; /*利用元素的quotes屬性指定文字元號*/}h1::before{ content:open-quote;}h1::after{ content:close-quote;}h2{ quotes:"\"" "\""; /*添加雙引號要轉義*/}h2::before{ content:open-quote;}h2::after{ content:close-quote;}
插入圖片
content屬性也可以直接在元素前/後插入圖片
#html<h3>這是h3</h3>#cssh3::after{ content:url(圖片路徑)}
插入元素的屬性值
content屬性可以直接利用attr擷取元素的屬性，將其插入到對應位置。
#html<a href="http://www.php.cn">這是連結</a>#cssa:after{ content:attr(href);}
插入項目編號
利用content的counter屬性針對多重專案追加連續編號.
#html<h1>大標題</h1><p>文字</p><h1>大標題</h1><p>文字</p><h1>大標題</h1><p>文字</p><h1>大標題</h1><p>文字</p>#cssh1:before{ content:counter(my)'.';}h1{ counter-increment:my;}
項目編號修飾
預設插入的項目編號是數字型的，1,2,3.。。。自動遞增，也能給項目編號追加文字和樣式,依舊利用上面的html，css修改如下：
h1:before{ content:'第'counter(my)'章'; color:red; font-size:42px;}h1{ counter-increment:my;}
指定編號種類
利用content(計數器名，編號種類)格式的文法指定編號種類，編號種類的參考可以依據ul的list-style-type屬性值。利用上述的html，css修改如下：
h1:before{ content:counter(my,upper-alpha); color:red; font-size:42px;}h1{ counter-increment:my;}
編號嵌套
大編號中嵌套中編號，中編號中嵌套小編號。
#html<h1>大標題</h1><p>文字1</p><p>文字2</p><p>文字3</p><h1>大標題</h1><p>文字1</p><p>文字2</p><p>文字3</p><h1>大標題</h1><p>文字1</p><p>文字2</p><p>文字3</p>#cssh1::before{ content:counter(h)'.';}h1{ counter-increment:h;}p::before{ content:counter(p)'.'; margin-left:40px;}p{ counter-increment:p;}
在樣本的輸出中可以發現，p的編號是連續的。如果對於每一個h1後的三個p重新編號的話，可以使用counter-reset屬性重設，修改上述h1的css:
h1{ counter-increment:h; counter-reset:p;}
還可以實現更複雜的嵌套，例如三層嵌套。
#html<h1>大標題</h1><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h1>大標題</h1><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3>#cssh1::before{ content:counter(h1)'.';}h1{ counter-increment:h1; counter-reset:h2;}h2::before{ content:counter(h1) '-' counter(h2);}h2{ counter-increment:h2; counter-reset:h3; margin-left:40px;}h3::before{ content:counter(h1) '-' counter(h2) '-' counter(h3);}h3{ counter-increment:h3; margin-left:80px;}
下面給出完整DEMO
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><style>.string p:after { margin-left: -16px; background: #fff; content: "支援"; color: #f00;}.attr p:after { content: attr(title);}.url p:before { content: url(http://img.php.cn/upload/article/000/000/009/587d87ecca52d563.jpg); display: block;}.test ol { margin: 16px 0; padding: 0; list-style: none;}.counter1 li { counter-increment: testname;}.counter1 li:before { content: counter(testname)":"; color: #f00; font-family: georgia,serif,sans-serif;}.counter2 li { counter-increment: testname2;}.counter2 li:before { content: counter(testname2,lower-roman)":"; color: #f00; font-family: georgia,serif,sans-serif;}.counter3 ol ol { margin: 0 0 0 28px;}.counter3 li { padding: 2px 0; counter-increment: testname3;}.counter3 li:before { content: counter(testname3,float)":"; color: #f00; font-family: georgia,serif,sans-serif;}.counter3 li li { counter-increment: testname4;}.counter3 li li:before { content: counter(testname3,decimal)"."counter(testname4,decimal)":";}.counter3 li li li { counter-increment: testname5;}.counter3 li li li:before { content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testname5,decimal)":";}</style></head><body><ul> <li> <strong>string：</strong> <p>你的瀏覽器是否支援content屬性：否</p> </li> <li> <strong>attr：</strong> <p title="如果你看到我則說明你目前使用的瀏覽器支援content屬性"></p> </li> <li> <strong>url()：</strong> <p>如果你看到圖片則說明你目前使用的瀏覽器支援content屬性</p> </li> <li> <strong>counter(name)：</strong> <ol> <li>清單項目</li> <li>清單項目</li> <li>清單項目</li> </ol> </li> <li> <strong>counter(name,list-style-type)：</strong> <ol> <li>清單項目</li> <li>清單項目</li> <li>清單項目</li> </ol> </li> <li> <strong>counter(name)拓展應用：</strong> <ol> <li>清單項目 <ol> <li>清單項目 <ol> <li>清單項目</li> <li>清單項目</li> </ol> </li> <li>清單項目</li> </ol> </li> <li>清單項目 <ol> <li>清單項目</li> <li>清單項目</li> </ol> </li> <li>清單項目 <ol> <li>清單項目</li> <li>清單項目</li> </ol> </li> </ol> </li></ul></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
