進捗バーCSSとHTMLのみ

Question

「接続されたドット」スタイルを取得するのにはいくつかの困難がありますが、私はHTMLとCSSで作成されたプログレスバーを作成しようとしています。

これは、次の要素に基づいているためです。どのようにして円の後ろに置くことができますか？

理想的には、ドット1 2 3を接続し、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

あなたの問題は、あなたがある接続、2を接続する必要があります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：afterの回転はここでは意味がないようです。

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; 
}