在css中，我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容。

从css2.0添加这两个伪元素选择器到css2.1到现在的3.0，都不断的在对这两个选择器进行改良和扩展。

首先，我们来看一下，在css2中，我们如何来插入内容（ie6 7不在考虑范围之内，因为他们不支持:before与after）。

在css2中，我们使用:before来在元素的前面插入内容，使用:after在元素的后面插入内容（兼容浏览器：firefox、chrome、safari、opera、ie8+）。请看下面的例子：

css样式：

            #div1 {
                border: 1px solid #090;
                padding: 10px;
                font-size: 14px;
                margin-bottom: 10px;
            }

            #div1:before{
            	content:"【";
				color:#f00;
				font-family:Arial;
            }

            #div1:after{
            	content:"】";
				color:#f00;
				font-family:Arial;
            }

html代码：

<div id="div1">插入内容</div>

在浏览器中查看演示结果（我测试过的浏览器：ff3.6/4.0/7.0、chrome14、safari5、opera10.6、ie8）：

所有demo下载