第17章

使用选择器在页面中插入内容

在16.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选择器在页面中各种项目的前面或后面插入各种级别、各种样式的项目编号。

17.1　使用选择器来插入文字

17.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>

为了让插入的文字具有美观效果，我们可以在选择器中加入文字的颜色、背景色、文字的字体等各种样式。代码清单17-1是一个before选择器的使用示例，在该示例中，在“标题”文字前加入“COLUMN”文字，在before选择器中，指定文字颜色为白色，背景色为橘色，并且用padding属性与margin属性对文字周围的余白进行适当的设定，同时，指定字体为“Comic Sans MS”。

代码清单17-1　before选择器的使用示例

这段代码的运行结果如图17-1所示。

另外，如果将before选择器改为after选择器，则将“COLUMN”文字插入到标题文字的后面。