伪元素::before与::after的用法实例教程

::before与::after两个伪元素其实是CSS3中的内容，然而实际上在CSS2中就已经有了这两者的身影，只不过CSS2中是前面加一个冒号来表示（:before和:after）。今天主要讲讲这两个伪元素该如何使用。

一、与普通元素一样可以给其添加样式

比如说我想在文字前面添加一个图标，如果我用普通元素写的话我可以这样写：

/*CSS*/.del{ font-size: 20px;}.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;} 

/*HTML*/
<div class="del"><i></i><span>删除</span></div> 

但是放个空的 i 标签总感觉很不爽，直接把它去掉吧！

/*CSS*/.del{ font-size: 20px;}.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}.del span{ vertical-align: middle;} 

/*HTML*/
<div class="del"><span>删除</span></div> 

这里就直接用::before伪元素代替了空的 i 标签，两者效果相同：

查看更多关于伪元素::before与::after的用法实例教程的详细内容...