19.3.1 CSS中的伪类选择器及伪元素(2)
这段代码的运行结果如图19-7所示。
图19-7 first-letter伪元素使用示例
(3)before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容,使用方法如下所示。
//可以插入一段文字
<元素〉:before
{
content:插入文字
}
//也可以插入其他内容
<元素〉:before
{
content:url(test.wav)
}
代码清单19-6是before伪元素选择器的一个使用示例,在该示例中有一个ul列表,该列表中有几个li列表项目,使用before伪元素选择器在每个列表项目的文字的开头插入"."字符。
代码清单19-6 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>
<style type="text/css">
li:before{content:
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</li>
</ul>
</body>
</html>
这段代码的运行结果如图19-8所示。
图19-8 before伪元素使用示例