偽元素 1、作用：CSS偽元素是用來新增一些選擇器的特殊效果。 2、語法：

偽元素的語法：
selector:pseudo-element {property:value;}
CSS類也可以使用偽元素：
selector.class:pseudo-element {property:value;}

3、常用偽元素：

做進度條的樣式主要就是用到after在元素後面插入內容、 結合定位的z-index實現遮蓋、分離的進度條的效果，如圖： 程式碼實現：

主要html：
<ul class="psur_plan_step">
	<li class="stepOver active" style="z-index: 3;">等待期</li>
	<li class="stepOver active_af" style="z-index: 2;">編寫期</li>
	<li class="stepOver active_af_af" style="z-index: 1;">提交期</li>
</ul>
主要style：
.psur_plan_step .stepOver{font-size: 10px;  display:inline-block;  position:relative; line-height:18px;height:18px;  width:46px;background:#EBEBEB;text-align:center;margin-right:2px; padding-left:3px;}
.psur_plan_step .stepOver:before {position:absolute;left:0;  top:0;  height:0;width:0;  border-bottom:9px inset transparent;border-left:9px solid #fff;  border-top:9px inset transparent;  content:""}
.psur_plan_step .stepOver:after {position:absolute;right:-9px;top:0;height:0;width:0;border-bottom:9px inset transparent;border-left:9px solid #EBEBEB;border-top:9px inset transparent;content:"";z-index:2}
.psur_plan_step .stepOver.active{color:#fff;background:#ccc;}
.psur_plan_step .stepOver.active:after {  border-left-color:#ccc;}
.psur_plan_step .stepOver.active_af{color:#fff;background:#70E09C;}
.psur_plan_step .stepOver.active_af:after {  border-left-color:#70E09C;}
.psur_plan_step .stepOver.active_af_af{color:#fff;background:red;}
.psur_plan_step .stepOver.active_af_af:after {  border-left-color:red;}
.psur_plan_step .stepOver:first-child:before{  border: 0}
.psur_plan_step .stepOver:last-child:after{border: 0}
.psur_plan_step .stepOver:nth-child(1){width:40px;}
.psur_plan_step .stepOver:nth-child(2){text-align:right;}