CSS3の順序付きリストでドットを接続する

Question

私はちょうどいくつかの点を順序付きリストと結びつけようとしていますが、それを動作させることはできません。私は、アクティブなクラスに応じてセグメントをオンにしたいと思います。さらに、この画像のようなセグメントの間に生徒の名前を追加します。

次に、クラスをアクティブにして他のセグメントをオンに切り替えることができます。

これは私がやろうとしていることです。

jsfiddle

UPDATE

私はli要素にアクティブ

UPDATE

をクラスを追加するのを忘れたので、私は、私は私のバイオリンを表示するために再び更新私のバイオリンを更新私はその人の名前に行かなければならない。

ol.timetable li { 
 
    min-width: 25%; 
 
} 
 

 
.timetable { 
 
    width: 100%; 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 20px 0 20px 0; 
 
    padding: 0; 
 
} 
 

 
    .timetable li { 
 
     float: left; 
 
     text-align: center; 
 
     position: relative; 
 
    } 
 

 
    .timetable .date { 
 
     display: block; 
 
     vertical-align: bottom; 
 
     text-align: center; 
 
     margin-bottom: 1em; 
 
     color: #2B2B2B; 
 
    } 
 

 
    .timetable .dot { 
 
     color: black; 
 
     border: 3px solid #B2B2B2; 
 
     background-color: #B2B2B2; 
 
     border-radius: 50%; 
 
     line-height: 1.2; 
 
     width: 1.2em; 
 
     height: 1.2em; 
 
     display: inline-block; 
 
     z-index: 2; 
 
    } 
 

 
    .timetable .active .date, 
 
    .timetable .active .dot span { 
 
     color: black; 
 
    } 
 

 
    .timetable .dot:before { 
 
     content: ""; 
 
     display: block; 
 
     background-color: #B2B2B2; 
 
     height: 0.4em; 
 
     width: 50%; 
 
     position: absolute; 
 
     bottom: 0.9em; 
 
     left: 0; 
 
     z-index: 1; 
 
    } 
 

 
    .timetable .dot:after { 
 
     content: ""; 
 
     display: block; 
 
     background-color: #B2B2B2; 
 
     height: 0.4em; 
 
     width: 50%; 
 
     position: absolute; 
 
     bottom: 0.9em; 
 
     right: 0; 
 
     z-index: 1; 
 
    } 
 

 
    .timetable li:first-child .dot:before { 
 
     display: none; 
 
    } 
 

 
     .timetable li:first-child .dot:after .active { 
 
      border: 3px solid #F26227 !important; 
 
      background-color: #F26227 !important; 
 
     } 
 

 
    .timetable li:last-of-type .dot:after { 
 
     display: none; 
 
    } 
 

 
    .timetable .active .dot { 
 
     border: 3px solid #F26227; 
 
     background-color: #F26227; 
 
    } 
 

 
    .timetable .active .dot:before, 
 
    .timetable .active .dot:before { 
 
     background-color: #F26227; 
 
    }

<ol class='timetable'> 
 
<li class="active"> 
 
    <span class='date'>5/26/2017</span> 
 
    <span class='active dot'> 
 
    <span> 
 
    </span> 
 
    </span> 
 
</li> 
 
<li class="active"> 
 
    <span class='date'>5/29/2017</span> 
 
    <span class='active dot'> 
 
     <span></span> 
 
    </span> 
 
</li> 
 
<li> 
 
    <span class='date'>6/5/2017</span> 
 
    <span class='dot'> 
 
     <span></span> 
 
    </span> 
 
</li> 
 
</ol>

Answer 1

あなたが記述する必要がどのくらいのCSS簡素化するために、私は一つの長い:before擬似要素で構成される各ラインセグメントではなく、:beforeと:afterの組み合わせを作ることをお勧めしたいです。これにより、関連する項目がアクティブなときに前の線分を記入するのが簡単になります。

ラベルを配置するには、<span>を動的に追加/削除することを前提としていますので、どこに配置するかを決定する必要があります。それに応じて配置と中心を合わせるために、私は絶対的な位置付けと、テキストを中心にする小さな変形を提案します。すべて一緒にこれを置く

は、あなたが得る：label要素を項目内の同じ場所にあることが保証されていない場合、私は追加することをお勧めしたいこと

ol.timetable li { 
 
    min-width: 25%; 
 
} 
 
.timetable { 
 
    width: 100%; 
 
    list-style: none; 
 
    list-style-image: none; 
 
    margin: 20px 0 20px 0; 
 
    padding: 0; 
 
} 
 
.timetable li { 
 
    float: left; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.timetable .date { 
 
    display: block; 
 
    vertical-align: bottom; 
 
    text-align: center; 
 
    margin-bottom: 1em; 
 
    color: #2B2B2B; 
 
} 
 
.timetable .dot { 
 
    color: black; 
 
    border: 3px solid #B2B2B2; 
 
    background-color: #B2B2B2; 
 
    border-radius: 50%; 
 
    line-height: 1.2; 
 
    width: 1.2em; 
 
    height: 1.2em; 
 
    display: inline-block; 
 
    z-index: 2; 
 
} 
 
.timetable .active .date, 
 
.timetable .active .dot span { 
 
    color: black; 
 
} 
 
.timetable .dot:before { 
 
    content: ""; 
 
    display: block; 
 
    background-color: #B2B2B2; 
 
    height: 0.4em; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0.9em; 
 
    left: -50%; 
 
    z-index: 1; 
 
} 
 
.timetable li:first-child .dot:before { 
 
    display: none; 
 
} 
 
.timetable .active .dot { 
 
    border: 3px solid #F26227; 
 
    background-color: #F26227; 
 
} 
 
.timetable .active + .active .dot:before { 
 
    background-color: #F26227; 
 
} 
 
.timetable li > span:nth-child(3){ 
 
    position:absolute; 
 
    right:0; 
 
    bottom:-15px; 
 
    transform: translateX(50%); 
 
}

<ol class='timetable'> 
 
    <li class="active"> 
 
    <span class='date'>5/26/2017</span> 
 
    <span class='active dot'> 
 
    <span> 
 
    </span> 
 
    </span> 
 
    <span>John Doe</span> 
 
    </li> 
 
    <li class="active"> 
 
    <span class='date'>5/29/2017</span> 
 
    <span class='active dot'> 
 
     <span></span> 
 
    </span> 
 
    </li> 
 
    <li> 
 
    <span class='date'>6/5/2017</span> 
 
    <span class='dot'> 
 
     <span></span> 
 
    </span> 
 
    </li> 
 
</ol>

注意をCSSを使用してターゲットを設定しやすくするためのクラスです。また、アクティブなドットの後ろの塗りつぶされていない線を隠す場合は、.timetable .dot:beforeのz-indexを負の値に設定するだけです。

兄弟セレクタの使用方法は.timetable .active + .active .dot:beforeです。これにより、アクティブな項目に関連付けられているすべての線ではなく、2つのアクティブな点の間の線のみが強調表示されます。

希望すると便利です。ご質問がある場合はお知らせください。