before/after伪类常见用法

1、清除浮动　

 .clearfix{*zoom :; }    /*IE6/IE7*/
 .clearfix:after{
     display: block;
     content: "clear";
     height:;
     clear: both;
     overflow: hidden;
     visibility: hidden;
 }

2、图片居中

 .box{
     width:500px;
     height:500px;
     background-color:#eee;
     font-size:;
     *font-size:200px;
     text-align:center;
 }
 .box img{
     vertical-align:middle;
 }
 .box:after{
     display:inline-block;
     width:;
     height:100%;
     content:"center";
     vertical-align:middle;
     overflow:hidden;
 }

3、在元素前后插入内容，要插入的内容使用 content 属性指定

 p:before
 {
     content:"pre-";
     background-color:yellow;
     font-weight:bold;
     color: red;
 }