伪元素做进度条

最新推荐文章于 2023-10-26 13:47:20 发布

_阿毛

最新推荐文章于 2023-10-26 13:47:20 发布

阅读量581

点赞数

分类专栏：实战得真知 html+css 文章标签： css 伪元素

本文链接：https://blog.csdn.net/amao_aguai/article/details/82978304

版权

实战得真知同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

html+css

14 篇文章 0 订阅

订阅专栏

伪元素
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;}