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>