第20章 使用选择器在页面中插入内容
20.1 使用选择器来插入文字
20.2 插入图像文件
20.3 使用content属性来插入项目编号
在19.3.1节中介绍CSS中的伪元素时，我们曾经介绍过，在CSS中可以使用before伪元素选择器与after伪元素选择器在页面中的元素的前面或后面插入内容，而插入的内容是用content属性来定义的。确切地说，before伪元素选择器与after伪元素选择器是在CSS 2.0中添加的，但是从CSS 2.1开始，一直到CSS 3中，都不断地在针对这两个选择器进行改良和扩展，这使得before伪元素选择器与after伪元素选择器的作用越来越强大，因此本章将特别针对这两个选择器做详细的介绍。
学习内容：
掌握CSS 3中使用选择器在页面中插入文字的方法，能够使用before选择器与after选择器在页面中元素的前面或后面插入文字。
掌握CSS 3中使用选择器在页面中插入图像的方法，能够使用before选择器与after选择器在页面中元素的前面或后面插入图像文件。
掌握CSS 3中使用选择器在页面中插入项目编号的方法，能够使用before选择器与after选择器在页面中各种项目的前面或后面插入各种级别、各种样式的项目编号。
20.1 使用选择器来插入文字
20.1.1 使用选择器来插入内容
首先，让我们来回顾一下，在CSS 2中是如何使用样式在元素的前面或后面插入内容的。
在CSS 2中，使用before选择器在元素前面插入内容，使用after选择器在元素后面插入内容，在选择器的content属性中定义要插入的内容。例如，在如下所示的代码中，对h2元素使用before选择器，并且用content属性来定义在h2元素前面插入的内容为"COLUMN"文字。另外，当插入内容为文字的时候，必须要在插入文字的两旁加上单引号或者双引号。
<style type="text/css">
h2:before{
content: 'COLUMN'
}
</style>
<h2>标题</h2>
为了让插入的文字具有美观效果，我们可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。代码清单20-1是一个before选择器的使用示例，在该示例中，在"标题"文字前加入"COLUMN"文字，在before选择器中，指定文字颜色为白色，背景色为橘色，并且用padding属性与margin属性对文字周围的余白进行适当的设定，同时，指定字体为"Comic Sans MS".
代码清单20-1 before选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> before选择器的使用示例</title>
</head>
<style type="text/css">
h2:before{
content: 'COLUMN';
color: white;
background-color: orange;
font-family: 'Comic Sans MS', Helvetica, sans-serif;
padding: 1px 5px;
margin-right: 10px;
}
</style>
<body>
<h2>标题文字</h2>
</body>
</html>
这段代码的运行结果如图20-1所示。
另外，如果将before选择器改为after选择器，则将"COLUMN"文字插入到标题文字的后面。
相关HTML 5与CSS 3权威指南：使用选择器来插入内容