before after

demo

1 添加描述信息

div1:after{conent:"天假额外的文字"}

2 也可以显示元素的某些属性

<a class="div1" href="http://www.baidu.com"></a>div1:after{ content:attr(href)}

注意：当使用attr()获取标签属性名的时候，千万不要添加引号!

3 使用计数器创建号码内容

ol {list-style-type:none;        counter-reset:sectioncounter;
}                      ol li:before {content:"计数" counter(sectioncounter) "： "; counter-increment:sectioncounter;
}

4 为多语言内容插入正确的引号

不同的语言使用不同的引号字符。比如英文的引号就是""，而中文引号就是“”。使用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;}

五、用图片替换文字

您可以参见下面的代码：

div.logo {content:url(logo.png);
}

这种图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。

然而，就目前而言，还是有不少需要注意的：
1. 你不能对图片进行重复或平铺，或是使用image sprite。
2. 目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用，因为这些浏览器支持所有元素的content方法，而不仅仅局限于:after或是:before。
替换的图片无法应用alt属性，所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

 

 

 

 

摘自：http://www.zhangxinxu.com/wordpress/2010/04/css-content%E5%86%85%E5%AE%B9%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E4%BB%A5%E5%8F%8A%E5%BA%94%E7%94%A8/