css实现时间轴

css实现时间轴实现效果,前端css实现时间轴,纯css垂直时间轴,时间线css绘制
定位+伪类简单实现
timerLine.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>timeLine</title>
    <style type="text/css" media="screen">
        body {
            margin: 0;
            padding: 0;
        }

        .main {
             1200px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        .timer {
            padding: 40px 0;
        }

        .timer .main .content .item {
             100%;
            min-height: 230px;
            position: relative;
        }

        .timer .main .content .item h5 {
            font-size: 28px;
            font-weight: 400;
            color: #2e2e2e;
            line-height: 100px;
            margin-left: 10px;
        }

        .timer .main .content .item .child {
            position: relative;
            border-left: 1px solid #E5E5E5;
            height: 70px;
            margin-left: 70px;
        }

        .timer .main .content .item .child span {
            position: absolute;
            top: -18px;
            left: -42px;
            font-size: 14px;
            font-weight: 300;
            color: #999999;
            line-height: 36px;
        }

        .timer .main .content .item .child p {
            position: absolute;
            left: 138px;
            top: -10px;
            font-size: 14px;
            font-weight: 400;
            color: #666666;
            line-height: 36px;
        }

        .timer .main .content .item .child::after {
            content: '';
            content: '';
             13px;
            height: 13px;
            display: inline-block;
            background: #1260e9;
            border-radius: 50%;
            position: absolute;
            left: -7px;
            top: -5px;
        }
    </style>
</head>

<body>
    <div class="timer tab-item">
        <div class="main hidden">
            <div class="content" style="1800px">
                <div class="item">
                    <h5>2020</h5>
                    <div class="child">
                        <span>9月</span>
                        <p>xx国际乔迁新址，开启新征程</p>
                    </div>
                </div>
                <div class="item">
                    <h5>2019</h5>
                    <div class="child">
                        <span>11月</span>
                        <p>荣获“2019年广西物流企业50强”荣誉称号</p>
                    </div>
                </div>
                <div class="item">
                    <h5>2018</h5>
                    <div class="child">
                        <span>11月</span>
                        <p>荣获“2018年中国物流创新奖”</p>
                    </div>
                    <div class="child">
                        <span>10月</span>
                        <p>荣获“广西壮族自治区服务业品牌”荣誉称号</p>
                    </div>
                    <div class="child">
                        <span>7月</span>
                        <p>荣获“AAA级信用企业”荣誉称号</p>
                    </div>
                </div>
                <div class="item">
                    <h5>2017</h5>
                    <div class="child">
                        <span>9月</span>
                        <p>荣获“AAA级物流企业”荣誉称号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
愿以往所学皆有所获