使用content属性来插入项目编号
在content属性中使用counter属性值来针对多个项目追加连续编号，使用方法如下所示。
<元素>：before{
content：counter(计数器名);
}
使用计数器来计算编号，计数器可任意命名。
另外，还需要在元素的样式中追加对元素的counter-increment属性的指定，为了使用连续编号，需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。代码如下所示。
<元素>{
counter-increment:before选择器或after选择器中指定的计数器名
}
对多个项目追加连续编号的示例
<h1>大标题</h1> <p>示例文字。</p> <h1>大标题</h1> <p>示例文字。</p> <h1>大标题</h1> <p>示例文字。</p>
h1:before{content: counter(mycounter);}
h1{counter-increment:mycounter;}
在项目编号中追加文字
只要将before选择器中的代码修改为如下所示的代码就可以了。
h1:before{
content: '第'counter(mycounter)'章';
}
指定编号的样式
可以指定追加编号的样式，譬如对代码中追加的编号指定如下所示的样式，使得编号后面带一个“.”文字，编号颜色为蓝色，字体大小为42像素。
h1:before{
content: counter(mycounter)'.';
color:blue;
font-size:42px;
}
指定编号的种类
用before选择器或after选择器的content属性，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。使用如下所示的方法指定编号种类。
content：counter(计数器名，编号种类)
可以使用list-style-type属性的值来指定编号的种类，list-style-type为指定列表编号时所用的属性。例如，指定大写字母编号时，使用“upper-alpha”属性，指定大写罗马字母时，使用“upper-roman”属性。
h1:before{
content: counter(mycounter,upper-alpha)'.';
color:blue;
font-size:42px;
}
可以在大编号中嵌套中编号，在中编号中嵌套小编号。在该示例中，有两个大标题，每个大标题中又有三个中标题，使用编号嵌套的方式分别对大标题与中标题进行分层编号。
<h1>大标题</h1> <h2>中标题</h2> <h2>中标题</h2> <h2>中标题</h2> <h1>大标题</h1> <h2>中标题</h2> <h2>中标题</h2> <h2>中标题</h2>
h1:before{
content: counter(mycounter) '. ';
}
h1{
counter-increment: mycounter;
}
h2:before{
content: counter(subcounter) '. ';
}
h2{
counter-increment: subcounter;
margin-left: 40px;
}
在这个示例中，6个中标题的编号是连续的，如果要将第二个大标题里的中标题重新开始编号的话，需要在大标题中使用counter-reset属性将中编号进行重置
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
中编号中嵌入大编号
可以将大编号嵌入在中编号中，譬如要将代码清单中的中编号修改为“大编号-中编号”的形式，需要将中编号的before选择器中的代码修改成如下代码
h2:before{
content: counter(mycounter) '-' counter(subcounter) '. ';
}
<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>
h1:before{
content: counter(mycounter) '. ';
}
h1{
counter-increment: mycounter;
counter-reset: subcounter;
}
h2:before{
content: counter(mycounter) '-' counter(subcounter) '. ';
}
h2{
counter-increment: subcounter;
counter-reset: subsubcounter;
margin-left: 40px;
}
h3:before{
content:counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter)'. ';
}
h3{
counter-increment: subsubcounter;
margin-left: 40px;
}
在字符串两边添加嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote属性值用于添加开始的嵌套文字符号，close-quote属性值用于添加结尾的嵌套文字符号。
另外，在元素的样式中使用quotes属性来指定使用什么嵌套文字符号。
对于嵌套文字符号的添加功能，目前Firefox浏览器、Opera浏览器，Chrome浏览器与Safari浏览器均对其提供支持。
为添加嵌套文字符号的一个示例，在该示例中有一个h1标题元素，文字为“标题”，使用before选择器与after选择器在标题文字两边添加括号。
<h1>标题</h1>
h1:before{
content: open-quote;
}
h1:after{
content: close-quote;
}
h1{
quotes:"（" "）";
}
当需要添加双引号时，需要使用“\”转义字符，使用方法如下所示。
h1{
quotes:"\"" "\"";
}
