快速业务通道

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

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-22

在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 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号