1、:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#zgz { color: #f00 }
#zgz:before
{
content: "秦";
color: red;
}
#zgz:after
{
content: "皇";
color: red;
}
</style>
</head>
<body>
<div id="zgz">始</div>
</body>
</html>
2、最后的输出结果应该是：秦始皇。