before/after伪类常见用法

1、清除浮动　

1 .clearfix{*zoom : 1; }    /*IE6/IE7*/
2 .clearfix:after{
3     display: block;
4     content: "clear";
5     height: 0;
6     clear: both;
7     overflow: hidden;
8     visibility: hidden;
9 }

2、图片居中

 1 .box{
 2     width:500px; 
 3     height:500px; 
 4     background-color:#eee; 
 5     font-size:0; 
 6     *font-size:200px; 
 7     text-align:center;
 8 }
 9 .box img{
10     vertical-align:middle;
11 }
12 .box:after{
13     display:inline-block; 
14     width:0; 
15     height:100%; 
16     content:"center"; 
17     vertical-align:middle; 
18     overflow:hidden;
19 }

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

1 p:before
2 { 
3     content:"pre-";
4     background-color:yellow;
5     font-weight:bold;
6     color: red;
7 }

 

posted @ 2017-06-27 11:23  wuln  阅读(169)  评论(0)  编辑  收藏  举报