19.3.1 CSS中的伪类选择器及伪元素（3）
（4）after伪元素选择器
after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。
<元素〉：after
{
content:插入文字
}
//也可以插入其他内容
<元素〉：after
{
content:url（test.wav）
}
代码清单19-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入"（仅用于测试，请勿用于商业用途。）"的文字，并且将文字颜色设为红色。
代码清单19-7 after伪元素选择器的使用示例
<!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>after伪元素选择器使用示例</title>
<style type="text/css">
li:after{
content: "（仅用于测试，请勿用于商业用途。）";
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
<li><a href="movie2.mp4">精武风云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>
</body>
</html>
这段代码的运行结果如图19-9所示。
图19-9 after伪元素选择器使用示例
相关HTML 5与CSS 3权威指南：CSS中的伪类选择器及伪元素（3）