HTML时间轴如何实现_CSS伪元素连接线

<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-content">
            <span class="timeline-date">2022年1月1日</span>
            <h3>项目启动</h3>
            <p>这是我们伟大旅程的起点，一切都充满了未知与期待。</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-content">
            <span class="timeline-date">2022年3月15日</span>
            <h3>核心模块开发完成</h3>
            <p>经过团队不懈努力，主要功能模块已初具雏形。</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-content">
            <span class="timeline-date">2022年6月20日</span>
            <h3>首次内部测试</h3>
            <p>收集了大量反馈，发现了不少可以优化的地方，挺有意思的。</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-content">
            <span class="timeline-date">2022年9月1日</span>
            <h3>产品正式上线</h3>
            <p>激动人心的时刻，产品终于面向公众了！</p>
        </div>
    </div>
</div>

.timeline {
    position: relative; /* 为伪元素提供定位上下文 */
    padding: 20px 0;
    margin: 0 auto;
    max-width: 800px; /* 限制宽度，让内容居中 */
}

/* 时间轴的主线 */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* 将线放在中间 */
    width: 2px; /* 线的粗细 */
    background-color: #e0e0e0; /* 线的颜色 */
    transform: translateX(-50%); /* 精确居中 */
}

.timeline-item {
    position: relative; /* 为子伪元素提供定位上下文 */
    margin-bottom: 40px; /* 每个事件点之间的间距 */
    padding-left: 50%; /* 为内容预留空间，这里是让内容都在右侧 */
}

/* 时间轴上的圆点 */
.timeline-item::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #007bff; /* 圆点颜色 */
    border-radius: 50%; /* 使其成为圆形 */
    left: 50%; /* 圆点在主线上 */
    top: 5px; /* 调整圆点垂直位置，使其与内容对齐 */
    transform: translateX(-50%);
    z-index: 1; /* 确保圆点在主线之上 */
    border: 2px solid #fff; /* 给圆点加个白边，视觉上更突出 */
}

.timeline-content {
    background-color: #f9f9f9;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-left: 30px; /* 内容块与主线之间的距离 */
}

.timeline-date {
    display: block;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px;
}

/* 继承上面的基础样式 */

/* 针对偶数项（第二个、第四个等）进行调整 */
.timeline-item:nth-child(even) {
    padding-left: 0; /* 清除左侧填充 */
    padding-right: 50%; /* 移动到右侧，为内容留空间 */
}

.timeline-item:nth-child(even) .timeline-content {
    margin-left: 0; /* 清除左侧外边距 */
    margin-right: 30px; /* 内容块与主线之间的距离 */
    text-align: right; /* 让内容靠右对齐 */
}

/* 媒体查询：在小屏幕上恢复单列布局 */
@media (max-width: 768px) {
    .timeline::before {
        left: 20px; /* 将主线移到左侧 */
        transform: none;
    }

    .timeline-item {
        padding-left: 50px; /* 为左侧的线和点留空间 */
        padding-right: 0;
    }

    .timeline-item::before {
        left: 20px; /* 圆点也移到左侧 */
        transform: none;
    }

    .timeline-content {
        margin-left: 0; /* 恢复默认 */
        margin-right: 0; /* 恢复默认 */
        text-align: left; /* 恢复默认 */
    }

    .timeline-item:nth-child(even) { /* 清除偶数项的特殊样式 */
        padding-left: 50px;
        padding-right: 0;
    }

    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }
}