진행 표시 줄 CSS 및 HTML 만

Question

"연결된 점"스타일을 얻는 데 어려움이 있지만 HTML 및 CSS만으로 진행률 표시 줄을 만들려고했습니다.

다음 요소를 기반으로하기 때문에 : 어떻게 요소를 원 뒤에 배치 할 수 있습니까? 일종의 z- 색인이 붙었습니까?

이상적 점 1 2, 2 세를 연결하는 연결해야하고, 3은 4

https://jsfiddle.net/bzjs1h9r/1/

<section class="steps"> 
<ul class="checkout"> 
    <li class="current"> 
    <div class="index">...</div> 
    <div class="caption">Email</div> 
    </li> 
    <li class="inactive"> 
    <div class="index">2</div> 
    <div class="caption">Your Info</div> 
    </li> 
    <li class="inactive"> 
    <div class="index">3</div> 
    <div class="caption">Delivery</div> 
    </li> 
    <li class="inactive"> 
    <div class="index">4</div> 
    <div class="caption">Review</div> 
    </li> 
</ul> 

.steps { 
.checkout { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
    li { 
    display: table-cell; 
    padding-left: 0; 
    text-align: center; 

    &:before { 
     margin: 0 auto; 
     display: block; 
     width: 30px; 
     height: 30px; 
     content: ""; 
     text-align: center; 
     float: none; 
     position: relative; 
     top: 30px; 
     border-radius: 100%; 
     border: 2px solid #79b93e; 
    } 

    &:after { 
     content: ""; 
     border: 1px solid rgba(135, 135, 135, 0.2); 
     width: 100%; 
     webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     transform: rotate(180deg); 
     display: block; 
     position: absolute; 
     top: 60px; 
     right: -53px; 
    } 


    &:last-child { 
     &:after { 
     display: none; 
     } 
    } 

    .caption { 
     text-transform: uppercase; 
     margin-top: 5px; 
     font-weight: 900; 
    } 
    } 
} 
.container-fluid { 
    max-width: 550px; 
    overflow:hidden; 
} 

}

이

Answer 1

여기에 귀하의 문제는 당신입니다

연결 position:relative ~ li으로 설정하십시오. li:after의 연결 라인은 first not position:inherit ancestor, body if none까지 절대적이며, 사용자 버전에서는 라인이 li 요소에 대해 절대적이어야합니다.

https://jsfiddle.net/bzjs1h9r/2/

내 수정 :

li { 
    position:relative; 
    &.index: { 
    position:relative; 
    z-index: 3; 
    } 
    &:before { 
    z-index: 2; 
    background: #fff; 
    } 
    &:after { 
    z-index: 1; 
    } 
} 

및 일부 위치 조정.

ps : li : 이후의 회전은 의미가없는 것처럼 보입니다.

Answer 2

나는이 링크를 발견했을 때 매우 비슷한 문제가 발생했습니다. css 만 사용하여 진행률 막대를 만드는 방법의 예를 제공합니다. 방금 CSS를 꺼내 프로젝트에서 사용했습니다. 여기

http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

당신이 "원 뒤에"무슨 뜻인지 설명 할 수 기본적인 예를 https://jsfiddle.net/matt_laza/6rdurftm/

#progressbar { margin-bottom: 30px; text-align:center; \t overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step} 
 
#progressbar li {width:25%; list-style-type: none; text-transform: uppercase; font-size: 11px; float: left; position: relative;} 
 
#progressbar li:before { content: counter(step);counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: #CCC; border-radius: 3px; margin: 0 auto 5px auto;} 
 
#progressbar li:after { \t content: ''; width: 100%; height: 2px; background: #CCC; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/} 
 
#progressbar li:first-child:after { /*connector not needed before the first step*/ content: none;} 
 
#progressbar li.active:before, #progressbar li.active:after{ background: #27AE60; color: white;}

<ul id="progressbar"> 
 
    <li class="active">Email</li> 
 
    <li>Info</li> 
 
    <li>Delivery</li> 
 
    <li>Review</li> 
 
</ul>

Answer 3

<div class="container"> 
<ul class="progressbar"> 
<li class="active">EMAIL</li> 
<li>YOUR INFO</li> 
<li>DELIVERY</li> 
<li>REVIEW</li> 
<ul> 
</div> 

.container{ 
width:100%; 
} 
.progressbar{ 
counter-reset:step; 
} 
.progressbar li{ 
list-style-type: none; 
float:left; 
width:22.22%; 
position:relative; 
text-align:center; 
} 
.progressbar li:before{ 
content:counter(step); 
counter-increment:step; 
width:30px; 
height:30px; 
line-height:30px; 
border:1px solid #0F0; 
display:block; 
text-align:center; 
margin:0 auto 10px auto; 
border-radius:50%; 
} 
.progressbar li:after{ 
content:''; 
position:absolute; 
width:100%; 
height:1px; 
background-color:#ddd; 
top:15px; 
left:-50%; 
z-index:-1; 
} 
progressbar li:first-child:after{ 
content:none; 
}