css横向滚动时间轴 |css3伪元素

/*html*/
<div class="timeline">
<div class="item">
<span class="date">2010</span>
<p class="event">事件1</p>
</div>
<div class="item">
<span class="date">2012</span>
<p class="event">事件2</p>
</div>
<div class="item">
<span class="date">2015</span>
<p class="event">事件3</p>
</div>
<div class="item">
<span class="date">2018</span>
<p class="event">事件4</p>
</div>
</div>
/*css*/
.timeline{
background-color: #f9f9f9;
white-space: nowrap; /*防止文字换行*/
overflow-x: auto; /*横向滚动*/
padding: 30px 10px;
}
.item{
display: inline-block; /*让元素并排*/
vertical-align: top;
margin-right: 20px;
}
.item:last-child{
margin-right: 0;
}
.date{
display: block;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
}
.event{
color: #555;
font-size: 16px;
}

以上是实现横向滚动时间轴的HTML和CSS代码。大家为每个事件都定义了一个.item，里面包含一个日期和事件说明。timeline类包裹着所有.item，通过white-space和overflow-x属性让它横向滚动。另外还对.item做了一些样式处理，如让它们并排、顶部对齐等。

如果需要添加更多事件，只需要再复制一份.item即可。通过修改CSS可以调整时间轴的样式和布局。