如何创建不同颜色的CSS时间轴

t98cgbkg 于 2023-08-09 发布在其他

关注(0)|答案(1)|浏览(118)

我想创建一个时间轴，根据给定的状态有不同颜色的线。
这和我想做的几乎是一样的：

的数据
我尝试过的：

.my-timeline ol {
    list-style-type: none;
}

.my-timeline li {
    position: relative;
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
}

.my-timeline li:before {
    content: '';
    background-color: #b8b8b8;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 6px;
    width: 3px;
}

.my-timeline li.isComplete:before {
    content: '';
    background-color: #008000;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 6px;
    width: 3px;
}

.my-timeline li:after {
    content: '';
    background-color: #b8b8b8;
    border-radius: 10px;
    position: absolute;
    left: 0;
    height: 15px;
    width: 15px;
}

.my-timeline li.isComplete:after {
    content: '';
    background-color: #008000;
    border-radius: 10px;
    position: absolute;
    left: 0;
    height: 15px;
    width: 15px;
}

个字符
我的尝试的唯一问题是，如果我想在<li>元素中使用除文本以外的任何内容，它将无法很好地格式化。
有人有什么建议吗？

css

来源：https://stackoverflow.com/questions/76822789/how-to-create-css-timeline-with-different-colors

1条答案

按热度按时间

hs1rzwqc1#

我会交换你的::before和::after。用::before画圆，用::after画线。这将使圆保持在<li>顶部旁边，即我们想要的位置。
为了整理，我们希望::after行只有在next元素.isComplete时才变绿色，然后我们希望隐藏最后一个元素::after行。
(Note CSS区分pseudo-classes和pseudo-elements。::before和::after是伪元素，所以应该用双冒号表示它们。）

.my-timeline ol, .my-better-timeline ol {
    list-style-type: none;
}

.my-timeline li, .my-better-timeline li {
    position: relative;
    margin: 0;
    padding-bottom: 1em;
    padding-left: 20px;
}

.my-timeline li::before, .my-better-timeline li::after {
    content: '';
    background-color: #b8b8b8;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 6px;
    width: 3px;
}

/* start the line below the circle, avoids a grey line going through a green circle */
.my-better-timeline li::after {
    top: 15px;
}

.my-timeline li.isComplete::before,
/* only make the line green if the NEXT element is complete */
.my-better-timeline li:has(+li.isComplete)::after {
    background-color: #008000;
}

.my-timeline li::after, .my-better-timeline li::before {
    content: '';
    background-color: #b8b8b8;
    border-radius: 10px;
    position: absolute;
    left: 0;
    height: 15px;
    width: 15px;
}

.my-timeline li.isComplete::after, .my-better-timeline li.isComplete::before {
    background-color: #008000;
}

/* don't display a line after the final circle */
.my-better-timeline li:last-child::after {
    display: none;    
}

个字符

赞(0）回复(0）举报 2023-08-09

我来回答

如何创建不同颜色的CSS时间轴

1条答案

相关问题

热门标签

最新问答