我們知道，在CSS3中出現了:before",":after"的偽類，那麼今天就來教大家CSS3的content屬性實現步驟，下面是案列，一起來看一下。
css3中出現了 ":before",":after"偽類，
你可以這樣寫：
h1:after{
content:'h1后插入的文本';
...}登入後複製
這兩個選擇器的作用以及效果，這裡就不在介紹了；主要說上面提到的一個css屬性content用來和:after及:before偽元素一起使用，在物件前後顯示內容。 #normal：預設值。圖像，聲頻，視訊或瀏覽器支援的其他任何資源）：插入字串
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屬性的後標記。
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實作旋轉光環效果的實作步驟
#
以上是CSS3的content屬性實作步驟的詳細內容。更多資訊請關注PHP中文網其他相關文章！
