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