css3中出現了 ":before",":after"偽類，
你可以這樣寫：
h1:after{content:'h1後插入的文本';...}
這兩個選取器的作用以及效果，這裡就不在介紹了；主要說一下上面提到的一個css屬性content用來和:after及:before虛擬元素一起使用，在對象前或後顯示內容。
content的取值：
normal：預設值。表現與none值相同
none：不產生任何值。<attr>：插入標籤屬性值<url>：使用指定的絕對或相對位址插入一個外部資源（映像，聲頻，視頻或瀏覽器支援的其他任何資源）<string>：插入字串
counter(name)：使用已命名的計數器
counter(name,list-style-type)：使用已命名的計數器並遵從指定的list-style-type屬性
counters(name,string)：使用所有已命名的計數器
counters(name,string,list-style-type)：使用所有已命名的計數器並遵從指定的list-style-type屬性
no-close-quote：並不插入quotes屬性的後標記。但增加其嵌套層級
no-open-quote：並不插入quotes屬性的前標記。但減少其嵌套層級
close-quote：插入quotes屬性的後標記
open-quote：插入quotes屬性的前標記
這裡比較不好理解的取值就是：counter(name)這些；
下面主要總結一下這塊，最後會給出各個取值的demo，
比如我有如下html結構：
<ul><li>這個是有序列表</li><li>這個是有序列表</li><li>這個是有序列表</li><li>這個是有序列表</li><li>這個是有序列表</li></ul>
我要在每個li的後面加上當前li index值：
ul li{counter-increment:index;}ul li:after{content:'統計：'counter(index);display:block;line-height:35px;}
解釋：
count(name)這裡的name，必須要提前指定好，否則所有的值都將是0；
count(name,list-style-type)這裡的list-style-type就是css中list-style-type屬性的取值；
下面給出完整DEMO
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS content</title><meta name="author" content="phpstudy.net"><meta name="copyright" content="www.phpstudy.net"><style>.string p:after {margin-left: -16px;background: #fff;content: "支援";color: #f00;}.attr p:after {content: attr(title);}.url p:before {content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png);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>
相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
CSS3關於translate屬性的詳細介紹
CSS3關於background-size屬性的詳細介紹
CSS3實現旋轉光環效果的實現步驟
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
