CSS3의 순서있는 목록으로 점을 연결하기

Question

나는 순서가 매겨진 목록과 몇몇 점들을 연결하려고하는데, 나는 그것을 작동시킬 수 없다. 활성 클래스에 따라 세그먼트를 켜고 추가로이 그림과 같은 세그먼트 사이에 학생 이름을 추가하고 싶습니다.

그러면 활성 클래스로 다른 세그먼트를 켤 수 있습니다.

이것이 내가 시도한 것입니다. 내가 보여 리튬 요소

UPDATE

내가 업데이트 다시 내 바이올린에 활성화 클래스를 추가하는 것을 잊었다 때문에

jsfiddle

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

는 차라리 :before 및 :after의 조합보다, 하나의 긴 :before 의사 요소로 구성된 각 선분을 건의 할 것입니다, 당신은 쓸 필요가 얼마나 많은 CSS 단순화하기 . 또한 연관된 ​​항목이 활성화되어있을 때 이전 선분을 채우는 것이 더 간단합니다.

레이블을 배치 할 때 동적으로 포함 된 <span>을 추가/제거 할 것이라고 가정 할 예정입니다. 따라서 어디에 배치해야하는지 결정해야합니다. 그에 따라 위치를 지정하고 중심을 맞추기 위해 절대 위치 지정과 텍스트를 가운데 맞추기위한 작은 변형을 제안합니다.

모두 함께이 퍼팅, 당신은 얻을 : 레이블 요소가 항목 내에서 같은 장소에 보장되어 있지 않은 경우

주

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입니다. 이렇게하면 활성 항목과 관련된 모든 줄이 아닌 두 개의 활성 점 사이의 선만 강조 표시됩니다.

희망이 도움이됩니다. 궁금한 점이 있으면 알려주세요.