css 时光轴效果 |css中用before加竖线

.timeline {
position: relative;
max-width: 1200px;
margin: 50px auto;
padding: 0 30px;
}

首先，大家需要创建一个容器来放置时光轴。为该容器添加相应的样式，如相对定位和最大宽度。

.timeline:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background-color: #ccc;
}

然后，大家在容器前面添加一个伪元素来表示时间轴。使用绝对定位和transform属性将其居中，并用颜色填充。同时，大家还需要把它的高度设置为与容器相等。

.timeline-item {
position: relative;
padding: 50px 0;
}
.timeline-item:not(:last-child):before {
content: '';
position: absolute;
top: 50%;
left: -22px;
transform: translateY(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #337ab7;
}
.timeline-item.default {
height: 0;
margin-top: -25px;
}
.timeline-item.default:before {
width: 0;
height: 0;
border: 12px solid transparent;
border-right: 12px solid #337ab7;
left: -12px;
}

接着，大家为每个时刻创建一个项目。在项目上使用相对定位，为它添加一些内边距来使项目看起来更加美观。如果它不是最后一个项目，大家需要添加一个小圆点来指示时间轴。大家还可以为最后一个项目创建一个特殊的类default，以便让它的样式与其他项目不同。

.timeline-item-content {
padding-left: 40px;
}
.timeline-item-content h3 {
margin-top: 0;
font-size: 1.2rem;
font-weight: normal;
}
.timeline-item-content p {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
.timeline-item-content .btn {
display: inline-block;
margin-top: 10px;
background-color: #337ab7;
color: #fff;
padding: 8px 15px;
border-radius: 5px;
}

最后，大家在每个项目中放置内容。为内容区域设置左侧内边距，使其与圆点对齐。为标题和描述添加相应的样式，以便它们更易于阅读。大家还可以为按钮添加一些样式，以增加其可操作性。

通过以上CSS代码，大家可以快速地实现一个简单的时光轴效果。根据实际需要，大家可以进一步扩展样式以满足需求。