使用 CSS 实现时间轴

如果有更好的思路或者建议，请务必在评论区告诉我。

一、基本思路

1. 首先在最外层构建一个 box，用来包裹所有的 item
2. 每一个子项拥有各自的元件，包括：line，icon，content
3. 使用伪元素来创建 line 和 icon
4. 把内容放在右边

二、具体实现

话不多说，直接上代码，仔细看注释。

.timeline {
   
   
   display: block;
   background-color: #fff;
}

.timeline>.item {
   
   
    // 使用内填充将 content 定位到右边
    padding: 30px 1