CSS实例教程;使用:before和:after插入内容

在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）：

如果所有的div前面和后面我都添加了上例中的红色括号，只有包含”none”的div后面不插入括号，也就是我所指定的个别元素不插入内容。下面我们来看下如何实现：

css样式：

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

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

            div:after{
            	content:"】";
				color:#f00;
				font-family:Arial;
            }
	   .div2:after{
		content:none;
		/*content:normal;*/
	   }

html代码：

<div>插入内容</div>
<div class="div2">插入内容</div>

这里使用的是content:none来实现不插入内容的，但是在opera10.6和safari5中是不支持的，只有ff3.6/4.0/7.0、chrome14、ie8支持。当使用normal关键字时，只有safari5不给力了（因此最好使用normal）。来看一下在结果（ff3.6/4.0/7.0、chrome14、ie8）：

不给力的safari5:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!