CSS中的::after ::before

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>利用::after和before来清除浮动</title><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> </head> <body><div id="box"><h1>使用clear清除浮动问题</h1></div><p>我是p标签</p> </body> </html>

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><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> </head> <body><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> </body> </html>