切版，進度條(兩個區塊中間的橫條)

 #css

#progress bar

版型：

首先是html的部分，首先要給他三個區塊。

 <ul class="progress-bar">

     <li class="my-circle">

            <i class="fas fa-check-circle"></i>

     </li>

     <li class="my-circle">

         <i class="fas fa-check-circle"></i>

     </li>

     <li class="my-circle">

         <i class="fas fa-check-circle"></i>

     </li>

</ul>

在這三個區塊裡面，放入fontawesome的icon(不可以直接用裡面的icon來切喔!會出事)。

有了三個區塊後，我們要利用偽元素，產生橫條。

css：

ul{

    /* 清除樣式 */

    list-style:none;

}

.progress-bar{

    /* 橫向排列 */

    display: flex;

    max-width: 190px;

}

.my-circle{

    font-size: 20px;

    position: relative;

}

.my-circle+.my-circle{

    /* 每個區塊產生間距 */

    margin-left: 63px;

}

.my-circle+.my-circle::before{

    content: '';

    position: absolute;

    height: 1px;

    width: 63px;

    background-color: black;

    top:0;

    bottom: 0;

    margin:auto;

    left:-63px;

}

在.my-circle的部分，裡面下的font-size是控制icon的大小的。

然後下相對定位。讓產生出來的偽元素可以定位。

接著.my-circle+.my-circle::before，讓第二個跟第三個區塊產生偽元素。

在裡面使用絕對定位，接著給他高度、寬度、背景顏色，看自己想要怎麼調整樣式。

最重要的地方在於下面四行。

    top:0;

    bottom: 0;

    margin:auto;

這是絕對定位垂直置中的方法。

接著left:-63px;讓這橫條移動到需要的位置就好了(基本上就是多寬移多長)