CSS3使用content屬性來插入項目編號

首先可使用before選擇器與after選擇器的content屬性在元素的前面或者後面插入文字和圖像，這裏我記錄的是利用這個content屬性來在項目前插入項目編號，同時能夠利用content屬性在字符串兩邊加上括號。

1.在多個標題前加上連續編號

<style type="text/css">

 h1:before{

   content:counter(mycounter);  

 }

</style>

 

2.在項目編號中追加文字

h1:before{

  content:'第'counter(mycounter)'章';

}

 

3.指定編號的樣式

例如：使得編號後面帶一個"."文字，編號顏色爲藍色，字體大小爲42像素。

h1:before{

   content:counter(mycounter)'.';

   color:blue;

   font-size:42px;

}

 

4.指定編號的種類

h1:before{

  content:counter(mycounter,upper-alpha)'.';

  color:blue;

  font-size:42px;

}

 

5.在字符串兩邊添加嵌套文字符號

可使用content屬性的open-quote屬性值與close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。

h1:before{

  content:open-quote;

}

h1:after{

 content:close-quote;

}

h1{

 quotes:"(" ")";

}