纯css实现timeline

思路

• 时间线（竖线）使用::before伪类实现
• 使用display:flex布局来控制每条时间线,通过flex-direction: row-reverse;来实现左右效果

.events {
        position: relative;
        display: flex;
        flex-direction: column;
        row-gap: 15px;
}
.event:nth-child(even) {
    flex-direction: row-reverse;
}

• 使用定位实现时间轴上的小圈圈
• 使用flex布局实现时间跟内容的布局

.event {
    display: flex;
    align-items: baseline;
    z-index: 1;
}