CSS中的::after ::before

利用::after和before来清除浮动

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

< style >          #box::after,#box::before{              content:"";              height:0;              visibility:hidden;              display:block;              clear:both;          }          h1{              width:300px;              height:300px;              background-color:#ccc;              float:left;          }          p{              width:300px;              height:300px;              background-color:#f1f1f1;          }      </ style >        < div  id = "box" >          < h1 >使用clear清除浮动问题</ h1 >      </ div >      < p >我是p标签</ p >

利用::after或::before玩弄Css计数器

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

< style >          ul{              list-style:none;            /* 初始化CSS计数器 并指定一个名称 我这里指定为count */              counter-reset:count;          }          ul>li{            /* 让 计数器每次自增 */              counter-increment:count;          }          ul>li::before{            /* 在页面输出 */              content:counter(count);              padding-right:20px;          }      </ style >        < ul >          < li >li_1</ li >          < li >li_2</ li >          < li >li_3</ li >          < li >li_4</ li >          < li >li_5</ li >          < li >li_6</ li >      </ ul >

页面输出效果

1   li_1
2   li_2
3　li_3
4　li_4
5   li_5
6   li_6