前言

先说说两点

1. 伪元素和伪类区别
2. 伪元素适合做什么
3. 哪些标签不支持伪元素

伪元素和伪类区别

伪类：用于向某些选择器添加特殊的效果，用来是弥补了CSS选择器的不足，更方便获取信息。

伪元素：用于将特殊的效果添加到某些选择器，用来创建了一个虚拟容器(元素)，我们可以在其虚拟容器中添加内容或样式。

伪元素和伪类示意图：

上图伪类元素使用两个冒号 (::) ，伪类使用一个冒号 (:)。

当然伪元素也可以只使用一个冒号 (:)，css2的写法。

同时也推荐使用一个冒号 (:)的写法，因为两个冒号 (::) 是css3的写法对IE不兼容。

伪元素适合做什么

大家最常用的估计也就是用来 清除浮动 吧

.wrap:after { // 清除浮动
 content: " ";
 display: table;
 clear:both;
}

其实 before/after伪元素应用非常广泛，很多大厂和老外的网站上相当的普及以及兴盛伪元素。

before/after伪元素相当于在元素内部插入两个额外的标签，其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上，可以简化HTML代码，提高可读性和可维护性。

哪些标签不支持伪元素

比如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。

前面说了 before/after伪元素相当于在元素内部额外的标签， input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容。

实际项目中使用before/after伪元素

一、清除浮动

.wrap:after { // 清除浮动
 content: " ";
 display: table;
 clear:both;
}

or

 .wrap:after {// 清除浮动
 content:""; 
 display:block; 
 height:0; 
 visibility:hidden;
 clear:both; 
 }
.wrap { *zoom: 1; }

二、icon小图标（雪碧图）

三、画一个倒三角

四、状态底线

效果图

代码如下：

<div class="line">这是我们的底线</div>

.line {
 position: relative;
 width: 7em;
 height: 20px;
 line-height: 20px;
}
.line:after,
.line:before {
 content: "";
 display: block;
 width: 4em;
 position: absolute;
 top: 10px;
 border: 1px solid #e9e9e9;
}
.line:before {
 left: -4.5em;
}
.line:after {
 right: -4.5em;
}

结尾

大家了解 before/after伪元素 特性后可以在工作中使用的地方很多。 一个很不错的东西。