CSS橫時間線是一種常用于展示歷史事件或進度的頁面元素，它通常以橫向的時間軸為主體，根據時間順序排列各項事件或進度。CSS橫時間線的實現方式相對簡單，以下是一份基本的代碼示例：

.timeline {
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
position: relative;
max-width: 900px;
height: 60px;
}
.timeline:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #ccc;
z-index: -1;
}
.timeline .event {
position: relative;
width: 200px;
height: 50px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,.1);
margin-left: -100px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.timeline .event:before {
content: "";
position: absolute;
top: -12px;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #ccc;
z-index: 1;
transform: translateX(-50%);
}
.timeline .event:after {
content: "";
position: absolute;
top: -12px;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #ccc;
z-index: 2;
transform: translate(-50%, -50%);
}
.timeline .event:first-of-type {
margin-left: 0;
}
.timeline .event:last-of-type {
margin-right: 0;
}
.timeline .event.active:before {
background-color: #007bff;
}
.timeline .event.active:after {
background-color: #fff;
border-color: #007bff;
}
.timeline .event.active p {
color: #007bff;
}

在上面的代碼中，使用flex布局將所有元素居中，timeline:before用于繪制時間軸，event表示各個事件或進度，使用:before和:after偽類實現節點的繪制，active用于表示當前活動狀態。為了更好地展示效果，可以在event中嵌入p標簽，使用CSS樣式控制字體大小、顏色等屬性。