SOURCE

console 命令行工具 X clear

                    
>
console
<style>
*{
    margin:0;
    padding:0;
}
ul{
    padding: 30px;
    counter-reset: section;
}
li{
    position: relative;
    list-style: none;
    padding: 20px 0px;
    display: flex;
    align-items: flex-start;
    
     
}

li::before{
    counter-increment: section;
    content: counter(section);
    width:20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    text-align: center;
    line-height: 20px;
    margin-right: 10px;
    margin-top:2px;
    flex:none;
    
}
li::after{
    position: absolute;
    left:9px;
    top:22px;
    display: block;
    content: '';
    width:2px;
    height: 100%;
    background-color: pink;
    z-index:-1;
}
li:last-of-type::after{
    display: none;
}
       
</style>


 <ul>
    <li> 
        <span class="text">申請活動請聯繫</span>
    </li>
    <li> 
        <!-- <span class="count">2</span> -->
        <span class="text">申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫</span>

    </li>
    <li> 
        <!-- <span class="count">3</span> -->
        <span class="text">申請申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫活動請聯繫</span>
    </li>
     <li> 
        <!-- <span class="count">4</span> -->
        <span class="text">申請申請活動請聯繫申請活動請聯繫申請活動請聯繫申請活動請聯繫活動請聯繫</span>
    </li>
</ul>