时间轴timeline

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

记录项目使用timeline中碰到的一个问题： 项目使用timeline作为时间轴展示时发现最后一个时间点下面的线一直存在，尝试了很多方法都不行，虽然最后解决了，但是却浪费了很长时间，这里记录下。主要还是css不扎实，不然不需要浪费那么长时间。（大神就不要笑话俺了）

从网上下载的css样式

    ul.timeline {
        list-style-type: none;
        position: relative;
    }
    ul.timeline:before {
            content: ' ';
            background: #d4d9df;
            display: inline-block;
            position: absolute;
            left: 29px;
            width: 2px;
            height: 100%;
            z-index: 400;
        }
    ul.timeline > li {
            margin: 20px 0;
            padding-left: 50px;
        }
            ul.timeline > li:not(:last-child)::after {
                content: '';
                display: block;
                position: absolute;
                width: 2px;
                height: 100%;
                background: #d4d9df;
                left: 30px;
                top: 5px;
                margin-left: -2px;
            }
            ul.timeline > li:last-child::after {
                content: '';
                display: block;
                position: absolute;
                width: 2px;
                height: 100px;
                background: #000000;
                left: 30px;
                top: 5px;
                margin-left: -2px;
            }
        ul.timeline > li:before {
            content: ' ';
            background: white;
            display: inline-block;
            position: absolute;
            border-radius: 50%;
            border: 3px solid #22c0e8;
            left: 20px;
            width: 20px;
            height: 20px;
            z-index: 400;
        }
    .divborder {
        width: 95%;
        padding: 5px 5px;
        margin: 5px 0 5px 5px;
        border: 1px solid #E4E6E9;
        border-radius: 10px;
    }
    .divopera {
        width: 95%;
        padding: 10px 10px;
        margin: 0 0 5px 10px;
        border: 1px solid #E4E6E9;
        border-radius: 10px;
    }
    .timetitle {
        font-size: 18px;
    }
</style>

html如下：

        <div class="row">
            <div class="col-md-6 offset-md-3" style="width:100%;">
                <h4>跟进记录</h4>
                <ul class="timeline" id="timeline">
                </ul>
            </div>
        </div>
    </div>

ul里的数据是从后台获取拼接的html就不放上来了。 结果的展示就像

每一个li下面都有这个线，这样就导致最后一个li的样式感觉怪怪的。 在网上查了一遍，很多没有说全，其实就是样式::after和::befor这两个伪类的使用。 于是修改对应的css代码：

ul.timeline {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        ul.timeline li {
            position: relative;
            padding-left: 50px;
            line-height: 20px;
        }

            ul.timeline li::after {
                content: "";
                position: absolute;
                left: 29px;
                top: 0;
                bottom: -20px;
                width: 2px;
                background: #d4d9df;
                z-index: 0;
            }

            ul.timeline li:last-of-type::after {
                bottom: 110%;
            }

            ul.timeline li:first-of-type:after {
                top: 0;
            }

            ul.timeline li::before {
                content: "";
                position: absolute;
                left: 20px;
                top: 0;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                border: 3px solid #22c0e8;
                background: white;
                z-index: 1;
            }

这样就解决了。

汗颜。。。。