html+css实现时间轴

html部分
< div class=“datagrid-mac-ower”>
< ul class=“time-vertical” id=“ower-result”>
< /ul>
< /div>

css部分：
.datagrid-mac-ower {
width: 300px;
height: 480px;
margin-left: 20px;
overflow-y: scroll;
}
.time-vertical {
list-style-type: none;
border-left: 2px solid #000;
margin-left: 10px;
padding: 0px;
}
.datagrid-btable{
width:320px;
}

    .time-vertical li {
        height: 80px;
        position: relative;
        width: 240px;
    }

            .time-vertical li a {
                display: inline-block;
                margin-left: 20px;
                margin-top: 15px;
                text-decoration: none;
                color: #000;
                height: 60px;
                background: #fff;
                width: 240px;
            }

            .time-vertical li b:before {
                content: '';
                position: absolute;
                top: 18px;
                left: -10px;
                width: 12px;
                height: 12px;
                border: 2px solid red;
                border-radius: 10px;
                background: red;
            }

            .time-vertical li span {
                position: absolute;
                color: #fff;
                top: 18px;
                left: -6px;
            }
            .time-vertical li div {
                text-align:left;
                font-size:13px;
                top: 18px;
                margin-left: 10px;
            }

js部分动态添加时间轴：
查询初始处调用该方法即可
function addTimeOwer(data) {
var content = ‘’;
var b = 0;
for (var i = 0; i < 8; i++) {
b = i+1;
content = ‘< li>< b>< /b>< span>’ + b +’< /span>< a href=“javascript:void(0)”>< div>2016-09-01 00:23:34< /div>< div>沣惠南路华晶广场< /div>< div>【IMSI】534746788953893< /div> < /a>< /li >’;
$("#ower-result").append(content);
}
}