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

除了上面用关键字的方法，还有一种方法，那就是插入”"的方式，这种方法都是支持的。

content:"";

使用:before与:after可以插入文字符号，也可以使用content属性的open-quote属性性与close-quote属性值在字符串的两边添加诸如括号、单引号等符号。从字面上我们就可以看出来，open-quote属性值可以在前面插入内容，close-quote会在结尾插入内容。

来看个例子：

		h1{
			quotes:"(" ")";
		}
		h1:before{
			content:open-quote;
		}
		h1:after{
			content:close-quote;
		}
		h2:before{
			content:"\\";
		}
		h2:after{
			content:"\\";
		}

html代码：

<h1>标题</h1>
<h2>标题h2</h2>

这里，h1标签使用quotes的方式在h1的前面和后面添加一对括号，而h2使用:before与:after的方法插入一对反斜杠（当然也可以插入一对括号，这里使用反斜杠是想说明，一些字符是要转义的，比如反斜杠）。 来看一下浏览器中的表现(ff3.6、chrome14、opera10.6、safari5、ie8)：

quotes也需要使用:before与:after来插入内容，真不知道他有什么优势，或许可以在quotes定义大量的文字或者符号，而content中引用就是它的优势。

插入完文字，我们现在来看一下如何插入图片。

css样式：

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

            div:first-child:after{
            	content:url(new.gif);
		margin-left:5px;
            }

html代码：

<div>插入内容</div>
<div>插入内容</div>
<div>插入内容</div>
<div>插入内容</div>

插入图片，这是一个非常非常给力的功能，比如我有一个新闻列表，第一条新闻我想加个new的图片或者说hot的图片，以前我们或许通过程序来控制，但是现在，前端工作者也可以实现了，不需要程序员去写判断（这里没有使用li列表的形式，将就一下吧，写demo的时候这样写了）。来看一下浏览结果（ff3.6/4.0/7.0、chrome14、safari5、opera10.6）：

ie8只支持插入文字，不支持插入图片的功能（PS：在ietester中的8.0好像支持，又多了一条不给力的证据）。

我们不仅仅可以插入文字、图片，我们还可以获取元素的属性，然后插入它。先来看一下获取div元素属

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