1、说明
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。
伪元素默认展示为inline，
即
display: inline;
必须写content属性，不然伪类不起作用！
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>
效果：
说明：将伪元素设置为的块级元素，伪元素同样拥有盒模型的概念。