css之content

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。该属性用于定义元素之前或之后放置的生成内容。默认地，这往往是行内内容，不过该内容创建的框类型可以用属性 display 控制。

应用：

（1） 清楚浮动

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {*zoom:1;}

after伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用clear:both清除浮动。

（2）插入文本

div:before {

content: "我是content添加的文字！";

}

在div元素开始插入“我是content添加的文字！”文本。

（3） 插入元素属性

content属性的值除了使用文本值外，还可以使用标签的一些属性值，方法是attr()，参见如下代码：

a.content:after {

content: attr(href);

}

<a class="content" href="http://www.zhangxinxu.com/">此标签的href值是：</a>

（4） 使用计数器创建号码内容

ul {

list-style-type:none;

counter-reset:sectioncounter;

}

ul li:before {

content:"美女" counter(sectioncounter) "： ";

counter-increment:sectioncounter;

}

css计数器是通过设置counter-reset 、counter-increment 两个属性 、及 counter()/counters()一个方法配合after / before 伪类实现。

（5） 插入符号

不同的语言使用不同的引号字符。比如英文的引号就是""，而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如，我们需要对下面的些文字添加其对应语言的引号，该怎么办呢？

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>

<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>

<p lang="ch"><q>欢迎来到上海，欢迎参观世博会！</q></p>

:lang(en) > q {quotes:'"' '"';}

:lang(no) > q {quotes:"«" "»";}

:lang(ch) > q {quotes:"“" "”";}

/* 在q标签的前后插入引号 */

q:before {content:open-quote;}

q:after  {content:close-quote;}

（6）图片代替文字

div.logo {

content:url(logo.png);

}

图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。你不能对图片进行重复或平铺，或是使用image sprite。替换的图片无法应用alt属性，所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

也可以使用:after或:before插入图片