html - 表格单元格 div 之间的 CSS 行

Question

我正在尝试绘制一个基本的水平时间轴，我可以使每个元素的间距正确，但我无法在它们之间画线。这是我的 html:

<ul class="timeline">
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
    <li><div class="badge"><i class="fa fa-check"></i></div></li>
</ul>

还有我的 CSS:

.timeline {
    display: table;
    width: 100%;
}

.timeline > li {
    display: table-cell;
    text-align: center;
}

.timeline > li > .badge {
    width: 50px;
    height: 50px;
    border-radius: 50% 50% 50% 50%;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    color: #fff;
    background-color: #999999;
}

这显示了三个等距的圆圈，中间有一个 Font Awesome 图标。现在我想在每个圆圈之间画线。我认为我可能需要使用 :after 和 :before，但我尝试过的任何事情都没有给出任何结果。这是一种尝试:

.timeline > li > badge:after {
    content: " ";
    width: 100%;
    height: 3px;
    background-color: #999999;
}

Answer 1

将此添加到 .timeline > li:

position: relative;

并添加这组新规则:

.timeline > li:not(:last-child):after
{
    content: '';
    display: block;
    position: relative;
    left: 50%;
    top: -30px;
    margin-left: 15%;
    width: 70%;
    height: 1px;
    background-color: black;
}

fiddle :http://jsfiddle.net/jacquesc/Lzvxyfv9/