前端開發中經常會用到時間線來展示公司歷史、項目進展等信息。為了美觀和交互性，我們常常使用CSS來設計時間線，本文就介紹一種純CSS實現時間線的方法。

一個最基礎的時間線由兩個部分組成，一條線和若干個時間節點。我們需要先設置時間線的外框，代碼如下：

.timeline {
position: relative;
padding: 50px 0;
margin: 0 auto;
width: 1000px;
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}

這里我們設置了時間線的位置`position: relative;`和大小`width: 1000px;`，并使用`border-top`和`border-bottom`屬性為時間線添加上下邊框。接下來我們需要添加時間節點，代碼如下：

.timeline-item {
position: relative;
margin-bottom: 100px;
}
.timeline-item::before {
content: "";
position: absolute;
left: -122px;
top: 10px;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
z-index: 1;
}
.timeline-item::after {
content: "";
position: absolute;
left: -95px;
top: 35px;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #ccc;
z-index: 1;
}

通過添加偽元素`::before`和`::after`，我們為時間節點添加了兩個小標簽，一個圓形和一個三角形，形成了完整的時間節點。注意這里我們設置了一些位置和樣式，需要根據實際需要做出調整。

最后，我們需要把這些時間節點添加到我們的時間線上，并按照時間順序排列。我們可以使用`float:left`屬性，將時間節點按照時間順序從左向右排列。代碼如下：

.timeline-item:nth-child(even) {
float: right;
clear: right;
}
.timeline-item:nth-child(even)::before { left: inherit; right: -122px; }
.timeline-item:nth-child(even)::after { left: inherit; right: -95px; }

這段代碼實現了時間節點的從右向左排列，并對`::before`和`::after`偽元素也做了相應的調整。最后我們只需要在html文件中添加時間節點，就完成了一個基于純CSS的時間線！