1、使用选择器插入文字
使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”。
<style type="text/css">
h2:before{
content:"Title";
}
</style>
并且我们还可以给他定义样式，进行美化操作。比如我们给“Title”的文字设置为白色，加上绿色的背景，内边距上下1像素左右5像素，外边距右边5像素，当然还可以设置他的字体等等。
1.2、排除一些不需要插入内容的元素
使用content属性的追加一个none属性值。比如：
<style type="text/css">
h2.nocontent:before{
content:none;
}
</style>
2、插入图片
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
3、插入项目编号
3.1、在多个标题前加上连续编号
在content属性中使用counter属性来正对对个项目追加连续的编号。
使用方法：
元素:before{
content:counter(计数器名);
}
使用计数器来计算编号，计数器可以任意命名。
除了使用计数器，还需要在元素的样式中追加对元素的（counter-increment）属性的指定为content属性值中所指定的计数器名称。
元素{counter-increment:计数器名}
3.2、在项目编号中追加文字
h1:berore{
content：'第'counter（content属性值中所指定的计数器名称）'章';}
变成另一种效果！“第一章、第二章…”
3.3、指定编号的样式
比如给他在编号后面带一个“.”文字，并且设置编号的颜色为绿色，字体大小42像素。
h1:before{
content：counter（content属性值中所指定的计数器名称）'.';
color:green;
font-size:42px;
}
3.4、指定编号的种类
before和after不仅可以追加数字编号，还可以追加字母编号或者罗马数字编号。
content：counter（计数器名,编号种类）
可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时，使用“upper-alpha”属性，指定大写罗马字母时使用“upper-roman”属性。
h1:before{
content：counter（计数器名,编号种类）'.';
color:green;
font-size:42px;
}
3.5、编号嵌套、重置编号
我们可以在大编号中华嵌套中编号，在中编号中又嵌入小编号！
1)、大编号中嵌入中编号
2)、counter-reset属性重置编号
3.6、中编号中嵌入大编号
h2:before{
content:counter(大编号的计数器)'-'counter(中编号的计数器)
}
3.7、在字符串两边嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如单引号、双引号之类的文字字符。
open-quote开始符号，close-quote结尾字符。
quote字符类型（使用双引号（””）的时候需要使用转义字符“\”）
示例：
<style>
h1:before{
content:open-quote;
}
h1:after{
content:close-quote;
}
h1{
quote:"(" ")";
}
</style>