/* 
可以通过改变 [--default --checked  --later] 修改整体颜色

css3变量：  注意1、需要在使用的父级声明,2、需要用--开头
var(--default,$f00) 
var(--自定义名,自定义无效时显示的颜色) 
***/

* {
    margin: 0;
    padding: 0;
    --default: #f8f8f8;
    /*默认*/
    --checked: white;
    /*当前选中的*/
    --later: #CCD5CC;
    /*当前选中下面的*/
}

.timeLine {
    margin: 20px auto 0;
    padding: 40px 20px;
    /* background-color: rgba(0, 0, 0, 0.1); */
    border-radius: 1em;
    overflow: hidden;
    position: relative;
    color:lightgray;
}

.timeLine li {
    background: linear-gradient(to left, var(--default, #f8f8f8), var(--default, #f8f8f8)) 7.5px top no-repeat;
    background-size: 1px 100%;
    padding-bottom: 30px;
    position: relative;
    display: flex;
    padding-left: 30px;
    cursor:pointer;
}

.timeLine li img {
    max-width: 100%;
}

.timeLine li::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--default, #f8f8f8);
    background: radial-gradient(var(--default, #ffffff) 25%, transparent 30%) 50% 50% no-repeat,
        linear-gradient(to left, #404040, #404040) left top no-repeat;
    background-size: 100% 100%, 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.timeLine li:last-child {
    background: none !important;
}

/* .on  */
.timeLine li.on {
    color: white;
    font-size: large;
    font-weight: bold;
    background: linear-gradient(to left, var(--later, #CCD5CC), var(--later, #CCD5CC)) 7.5px top no-repeat;
    background-size: 1px 100%;
    position: relative;
}

.timeLine li.on::after {
    content: "";
    border: 1px solid var(--checked, white);
    background: radial-gradient(var(--checked, white) 25%, transparent 30%) 50% 50% no-repeat,
        linear-gradient(to left, white, white) left top no-repeat;
    background-size: 100% 100%, 100% 100%;
}

/* .on 下面的li  */
.timeLine li.on~li {
    background: linear-gradient(to left, var(--later, #CCD5CC), var(--later, #CCD5CC)) 7.5px top no-repeat;
    background-size: 1px 100%;
}

.timeLine li.on~li::after {
    content: "";
    border: 1px solid var(--later, #CCD5CC);
    background: radial-gradient(var(--later, #CCD5CC) 25%, transparent 30%) 50% 50% no-repeat,
        linear-gradient(to left, #404040, #404040) left top no-repeat;
    background-size: 100% 100%, 100% 100%;
}