[CI4] 스텝바 코드 CSS

 <div class="pt-4 mt-4 px-2 pb-2">
        <ul class="stepbar p-0">
            <li class="active">
                <div class="d-flex flex-column align-items-start justify-content-between" style="height: 1em;">
                    <div class="arrowtooltip font-9 titleUnderFont font-300" style="margin-top: -35px;">
                        <span class="tooltiptext1 tooltip-top font-800">5,000.000 USDT</span>
                        Deposit
                    </div>
                    <div class="font-8 font-700 titleUnderFont">2022-09-28</div>
                </div>
            </li>
            <li>
                <div class="d-flex flex-column align-items-center justify-content-between" style="height: 1em;">
                    <div class="font-9 titleUnderFont font-300"  style="margin-top: -33px;">Start</div>
                    <div class="font-8 fw-bold titleUnderFont">2022-09-28</div>
                </div>
            </li>
            <li>
                <div class="d-flex flex-column align-items-end justify-content-between" style="height: 1em;">
                    <div class="arrowtooltip font-9 titleUnderFont font-300" style="margin-top: -35px;">
                        <span class="tooltiptext2 tooltip-top font-800 active">2,600.000 USDT</span>
                        Expire
                    </div>
                    <div class="font-8 font-700 titleUnderFont">2022-09-28</div>
                </div>
            </li>
        </ul>

    </div>

/* step bar */
.stepbar {
    counter-reset: step;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.stepbar li {
    list-style: none;
    width: 32%;
    position: relative;
    text-align: center;
    cursor: pointer;
    margin-top: 1em;
}
.stepbar li:nth-child(1)::before {
    content: "";
    width: 11px;
    height: 11px;
    line-height : 30px;
    border: 1px solid #9E9E9E;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0px auto 5px 0;
    background-color: #fff;
    position: static;
    z-index: 2;
}

.stepbar li:nth-child(2)::before {
    content: "";
    width: 11px;
    height: 11px;
    line-height : 30px;
    border: 1px solid #9E9E9E;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin: 0px auto 5px auto;
    background-color: #fff;
    position: static;
    z-index: 2;
}

.stepbar li:nth-child(3)::before {
    content: "";
    width: 11px;
    height: 11px;
    line-height : 30px;
    border: 1px solid #9E9E9E;
    border-radius: 100%;
    display: block;
    text-align: center;
    margin:  0px 0 5px auto;
    background-color: #fff;
    position: static;
    z-index: 2;
}


.stepbar li:nth-child(2)::after {
    content: "";
    position: absolute;
    width: 141%;
    border-bottom: 1px dotted #9E9E9E;
    z-index: 0;
    top: 5px;
    left: -97%;
}


.stepbar li:nth-child(3)::after {
    content: "";
    position: absolute;
    width: 141%;
    border-bottom: 1px dotted #9E9E9E;
    z-index: 0;
    top: 5px;
    left: -52%;
}

.stepbar li:first-child:after {
    content: none;
}
.stepbar li.active div {
    color: #19E0A7 !important;
}
.stepbar li.active:before {
    border-color: #19E0A7;
    background-color: #19E0A7 !important;
    z-index: 2;
} 
.stepbar li.active + li:after {
    border-color: #19E0A7 !important;
    z-index: 1;
}

별건 없고, 그냥 세개의 원에서 ㅇ---ㅇ---ㅇ을 그린건데, 지웠다가 나중에 쓸 듯해서 끄적임.