css before和after偽元素應用
阿新 • • 發佈：2017-08-16
pan clear play set tle ear ani tab title
1、說明
":before" 偽元素可以在元素的內容前面插入新內容。
":after" 偽元素可以在元素的內容之後插入新內容。
2、兼容性
偽元素有2種寫法，單冒號和雙冒號，單冒號和雙冒號作用是一樣的。
兼容性查看：http://caniuse.com/#search=%3Abefore
從上圖看見：IE8瀏覽器只支持單冒號寫法，不支持雙冒號寫法，因此建議before和after偽元素采用單冒號寫法。
3、應用
（1）清除浮動
.clearfix:after { content: " "; display: table; } .clearfix:after{ clear: both; }
（2）添加美化圖標
如清除ul li顯示默認的小黑點，添加美化的符號
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>css 偽元素應用--添加美化圖標</title> <style type="text/css"> * { padding: 0; margin: 0; font-size: 14px; } ul { margin: 100px; list-style: none; } li:before { display: inline-block; content: "";width: 4px; height: 4px; background: #0e337a; position: relative; left: 0; top: -3px; margin-right: 5px; } </style> </head> <body> <ul> <li>1、before偽元素使用</li> <li>2、after偽元素使用</li> </ul> </body> </html>
效果：
說明：將偽元素設置為的塊級元素，偽元素同樣擁有盒模型的概念。
css before和after偽元素應用