CSS - 縦線

Question

私は教育のタイムラインを作成しようとしています。 「卒業の帽子」の背後から始まり、すべてのタイムラインポスト（緑色）を通過するよりも、垂直線（赤色）があるはずです。

これは私がこれまでに得たものである：

.iconspace { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    border-radius: 50%; 
 
    background-color: #25b5f1; 
 
    z-index: 7; 
 
} 
 

 
.iconspace i { 
 
    font-size: 18px; 
 
    color: #FFFFFF; 
 
    line-height: 40px; 
 
} 
 

 
.iconspace:after, .iconspace::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 49.8%; 
 
    width: 3px; 
 
    height: 100%; 
 
    background-color: RED; 
 
    z-index: 5; 
 
} 
 

 
.timeline-post { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: green; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span> 
 
<div class="timeline"> 
 
<div class="iconspace"><i class="fa fa-graduation-cap"></i></div></div> 
 

 
<div class="timeline-post"> 
 
Test 1 
 
</div> 
 

 
<div class="timeline-post"> 
 
Test 2 
 
</div> 
 

 
<div class="timeline-post"> 
 
Test 3 
 
</div> 
 
</div>

Answer 1

あなたの代わりにこれを行うことができますので、あなたは、タイムラインの記事のコンテナではなく、アイコンに擬似要素を適用する必要があります。

あなたは（緑の要素の上または下）、ニーズに応じてのz-index値を変更することがあり

.iconspace { 
 
    position: relative; 
 
    width: 40px; 
 
    height: 40px; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    border-radius: 50%; 
 
    background-color: #25b5f1; 
 
    z-index: 7; 
 
} 
 

 
.iconspace i { 
 
    font-size: 18px; 
 
    color: #FFFFFF; 
 
    line-height: 40px; 
 
} 
 

 
.timeline { 
 
    position: relative; 
 
} 
 

 
.timeline:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 49.8%; 
 
    width: 3px; 
 
    height: 100%; 
 
    background-color: RED; 
 
    z-index: -5; 
 
} 
 

 
.timeline-post { 
 
    height: 100px; 
 
    width: 200px; 
 
    background-color: green; 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<h3 class="entry-title" style="text-align: center;">EDUCATION</h3><span class="border"></span> 
 
<div class="timeline"> 
 
    <div class="iconspace"><i class="fa fa-graduation-cap"></i></div> 
 

 
    <div class="timeline-post"> 
 
    Test 1 
 
    </div> 
 

 
    <div class="timeline-post"> 
 
    Test 2 
 
    </div> 
 

 
    <div class="timeline-post"> 
 
    Test 3 
 
    </div> 
 
</div>