css step progress bar ~ > html/css

본문 바로가기
gnb bg


html/css

html/css

css step progress bar ~

본문

20ce1a9a00348283cfe1b7fd550354a9_1529979064_1078.png
 



-----------------------------

.sec_step_blk {position: relative; margin:10px 0 30px;}

.steps {counter-reset: step;} 

.steps li {position: relative;  display: inline-block;  width: 33%; font-size: 16px; font-weight:bold ; color:#999; text-align: center; list-style: none;}

.steps li:before {content: 'Step ' counter(step);  counter-increment: step;  width: 200px;  height: 30px; color:#fff; font-weight:bold;  line-height : 30px;  border-radius: 40px;  display: block;  text-align: center;  margin: 0 auto 10px auto;  background-color: #1eb4ff; position: relative;z-index:10;}

.steps li:after {content: "";  position: absolute;  width: 100%;  height: 1px;  background-color: #039ce9;  top: 15px;  left: -50%;  z-index:1;}

.steps li:first-child:after {  content: none;}

.steps li.active {color:#000;}

.steps li.active:before { background-color: #0683c2;} 

.steps li.active:after {background-color: #039ce9;}

.steps li.active ~ li:before,

.steps li.active ~ li:after {background-color: #999;}

-------------------------------------------------


<div class="sec_step_blk">

<ul class="steps">

<li class="active">상품구매</li>

<li>생성정보</li>

<li>상품구매완료</li>

</ul>

</div>









댓글목록

등록된 댓글이 없습니다.


Copyright 2005-2020 UNIDA_v7. All rights reserved.