CSS - Vertikale Linie

Question

Ich versuche, eine Bildungszeitachse zu erstellen. Es sollte eine vertikale Linie (rot) geben, die hinter der "Abschlusskappe" beginnt und dann den gesamten Timeline-Post (grün) durchläuft.

Das ist, was ich bisher habe:

.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

Sie müssen die Pseudo-Element in den Behälter von Timeline-Beiträge und nicht das Symbol anwenden, so dass Sie diese stattdessen tun kann:

Sie können z-Index-Wert ändern je nach Ihren Bedürfnissen (über oder unter grünen Elementen)

.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>