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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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”文字插入到标题文字的后面。
