before伪元素和after伪元素的具体使用

使用before伪元素和after伪元素在页面中插入文字、图像、项目编号等，插入的内容是以content属性来定义的。

1、使用选择器插入内容：

（1）在CSS3中使用before选择器在元素的前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容；

（2）使用方法：标签:before{content:"插入的内容";},可以修改插入内容的样式；

（3）排除一些不需要插入内容的元素：使用content属性的追加一个none属性值。使用方法：标签:before{content:none;}

2、使用选择器插入图片文件：

（1）使用before或者after除了可以在元素前后插入文字之外还可以插入图片。插入图片是需要使用URL指定图片路径的；

（2）使用方法：标签:before{content:url(...);}

（3）插入图片文件的好处：节省开发的工作量，可以通过类的方式来进行不同标题图片的追加；

3、使用选择器插入项目编号：

（1）在多个标题前加上连续编号：在content属性中使用counter属性来针对项目追加连续的编号。使用方法：元素:before{content:counter(计数器);}使用计数器来计算编号，计数器可以任意命名，除了使用计数器还需要在元素的样式中追加对元素的(counter-increment)属性指定为content属性值中所指定的计数器名称。使用方法：元素{counter-increment:content属性值中所指定的计数器名称}

1）HTML代码：

<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>

2）CSS代码：

h2:before{
	content: counter(number);
}
h2{
	counter-increment: number;
}

3）效果图如下：

（2）在项目编号中追加文字：使用方法：标签:before{content:"第"counter(content属性值中所指定的计数器的名称)"章"}

1）HTML代码：

<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>

2）CSS代码：

p:before{
	content: "第"counter(number)"章、";
}
p{
	counter-increment: number;
}

3）效果图如下：

（3）指定编号的样式：比如在编号后面添加一个"."文字，并且设置编号的颜色为绿色，字体大小为42像素。使用方法：标签:before{content:"第"counter(content属性值中所指定的计数器的名称)"章";...(CSS样式)}

1）HTML代码：

<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>

2）CSS代码：

h2:before{
	content: "第"counter(number)"章.";
	color: green;
	font-size: 42px;
}
h2{
	counter-increment: number;
}

3）效果图如下：

（4）指定编号的种类：before和after不仅可以追加数字编号，还可以追加字母编号或者罗马字母；使用方法：content:counter(计数器名,编号种类)；可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时使用"upper-alpha"属性，指定大写罗马字母时使用"upper-roman"属性；

1）HTML代码：

<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>
<h2>使用选择器插入项目编号</h2>
<p>这只是一个测试</p>

2）CSS代码：

p:before{
	content: "第"counter(numberP,upper-roman)"章、";
	color: red;
}
p{
	counter-increment: numberP;
}

3）效果图如下：

（5）编号嵌套、重置编号：可以在大编号中嵌套中编号，在中编号中嵌套小编号；

1）大编号中嵌入中编号；

①HTML代码：

<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>

②CSS代码：

h2:before{
	content: counter(number1);
	color: green;
}
h2{
	counter-increment: number1;
}
h3:before{
	content: counter(number1);
	color: #ff6600;
}
h3{
	counter-increment: number2;
}

③效果图如下：

2）counter-reset属性重置编号(将该属性添加在需要重置元素的父级元素中，其后的值为需要重置元素的计数器名称)；

①HTML代码：

<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>

②CSS代码：

h2:before{
	content: counter(number1);
	color: green;
}
h2{
	counter-increment: number1;
	counter-reset: number2;
}
h3:before{
	content: counter(number2);
	color: #ff6600;
}
h3{
	counter-increment: number2;
}

③效果图如下：

（6）中编号嵌入大编号：使用方法：标签:before{content:counter(大编号的计数器)"-"counter(中编号的计数器)}

1）HTML代码：

<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h3>编号嵌套、重置编号</h3>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>
<h2>使用选择器插入项目编号</h2>

2）CSS代码：

h2:before{
	content: counter(number1);
	color: green;
}
h2{
	counter-increment: number1;
	counter-reset: number2;
}
h3:before{
	content: counter(number1)"-"counter(number2);
	color: #ff6600;
}
h3{
	counter-increment: number2;
}

3）效果图如下：

（7）在字符串两边嵌套文字符号：可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如单引号、双引号之类的文字字符；其中open-quote为开始符号，close-quote为结尾符号，quote字符类型(使用双引号""的时候需要使用转义字符"\")。使用方法：标签:before{content:open-quote;}，标签:after{content:close-quote;}，标签{quotes:"(""")"}

1）HTML代码：

<h1>在字符串两边嵌套括号</h1>
<h2>在字符串两边嵌套引号</h2>

2）CSS代码：

h1:before,
h2:before{
	content: open-quote;
}
h1:after,
h2:after{
	content: close-quote;
}
h1{
	quotes: "("")";
}
h2{
	quotes: "\"""\"";
}

3）效果图如下：