css中的before,after

伪元素before和after通过在content中指定内容在元素前后插入新的内容，因为插入的元素不会出现在文档流和源文件中，因此被称为伪元素。插入的为元素也可以通过css看控制样式，所以可以通过这两个伪元素来实现很多不需要js就可以完成的精致效果。

1、用于清除浮动，这个在自己的使用过程中比较常用，在最有一个带有浮动效果的元素后使用after为元素，并设置其样式的clear，达到清除浮动的效果。

.cf:before,.cf:after {content:""; display:table;}.cf:after {clear:both;} /* For IE 6/7 (trigger hasLayout) */.cf {zoom:1;}

2、文字前后小图，标题后面的小提示小标记神马的

.phonenumber:before {    content: "☎";    font-size: 15px;}.phonenumber:after {    content: "☎";    font-size: 15px;}

3、自由发挥。。。。

http://www.css3shapes.com/

这个页面上产生的图形都是css写的，其中很多使用了before,after为元素来生成。

在浏览器兼容方面，ie仍旧扮演了老鼠shi的角色。。。

解决方案：

使用 JavaScript 或 jQuery 的 Pseudo Plugin 插件来模拟 ':before' 及 ':after' 伪元素的效果。

使用jquery的插件 Pseudo Plugin该组件利用 IE 特有的 CSS 行为（behavior）及 CSS 表达式来模拟 ':before' 及 ':after' 伪元素的效果。