css横向时间齿轮 |使css伪元素失效

/* CSS样式代码 */
.timeline {
width: 100%;
white-space: nowrap;
overflow-x: auto;
padding: 0 20px;
margin: 50px 0;
}
.timeline:before {
content: '';
display: inline-block;
width: 50%;
}
.timeline ul {
list-style: none;
display: inline-block;
white-space: nowrap;
}
.timeline li {
display: inline-block;
width: 20%;
text-align: center;
position: relative;
padding-bottom: 100px;
}
.timeline li:before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
background-color: #fff;
border: 4px solid #F8AD60;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
@media screen and (max-width: 600px) {
.timeline li {
width: 100%;
padding-bottom: 70px;
}
.timeline li:before {
width: 12px;
height: 12px;
border-width: 3px;
}
}

上面的CSS样式代码中，大家定义了一个timeline类，它的宽度为100%，white-space属性设置为nowrap，overflow-x属性设置为auto，这样就能够实现左右滑动。同时，大家使用了:before伪元素，在左侧添加了宽度为50%的空白块，使得时间点能够在中间展示。

在ul元素内，大家使用了list-style属性将li元素的基点符号去掉，并且将它们设置为inline-block元素，使它们排列在同一行。li元素的宽度为20%，文本居中，底部使用了一个圆形图标表示时间点。通过@media语句，大家还为小屏幕设备添加了适配样式。

以上就是CSS横向时间齿轮的核心代码。在实际应用中，你可以根据自己的需要对其进行修改和优化，打造出更好的网页体验。