偽元素做進度條
阿新 • • 發佈:2018-12-15
偽元素 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;}