如何使用伪元素

Question

我试图创建如下图模拟此图：

我可以画圆，并使用下面的代码片段直线。请帮我画曲线和红圈。我附上了图片。这可能使用CSS伪元素吗？

<ul> 
    {this.props.invoiceCounts.map((invoiceCount) => { 

     return (
      <li key={invoiceCount.key} className="invoice-state"> 
       <div>{invoiceCount.name}</div> 
       <div className={invoiceCount.className}> {invoiceCount.count} </div> 
      </li> 
     ); 
    })} 
</ul> 

    .invoice-state { 
    color: grey; 
    display: inline-block; 
    text-align: center; 
    } 

    .circle { 
    border-radius: 50%; 
    height: 40px; 
    text-align: center; 
    width: 40px; 
    margin: 0px 60px; 
    line-height: 40px; 
    } 

    li::before{ 
    content: ''; 
    position: absolute; 
    top: 81px; 
    width: 142px; 
    height: 1px; 
    background: grey; 
    z-index: -1; 
    } 

    li:last-child::before { 
    display:none; 
    } 

    .white-circle { 
    @extend .circle; 
    background-color: white; 
    border: 1px solid grey; 
    color: grey; 
    } 

    .grey-circle { 
    @extend .circle; 
    background-color: grey; 
    color: white; 
    } 

    .red-circle { 
    @extend .circle; 
    background-color: red; 
    color: white; 
    } 

    .green-circle { 
    @extend .circle; 
    background-color: green; 
    color: white; 
    } 

Answer 1

我一直在你的HTML布局相同，除了红色的圆圈，我不得不在其中嵌套另一个ul>李（相同的布局为他人）到里。我不能在没有进行更多研究的情况下使曲线变为曲线，但是我可以用伪元素做出界线。希望这可以帮助。 Here is a CodePen link of the code as well to view easier.

.invoice-state { 
 
    color: grey; 
 
    display: inline-block; 
 
    text-align: center; 
 
    position: relative; 
 
    font-family: arial; 
 
    } 
 
.invoice-state div:not([class]) { 
 
    -webkit-box-ordinal-group: 2; 
 
    -moz-box-ordinal-group: 2; 
 
    -ms-flex-order: 2; 
 
    -webkit-order: 2; 
 
    order: 2; 
 
} 
 
.invoice-state ul .invoice-state div:not([class]) { 
 
    margin: 5px 0 0 0; 
 
} 
 
.invoice-state ul .invoice-state { 
 
    position: absolute; 
 
    margin: 20px 0 0 0; 
 
    left: 0; 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -moz-box-orient: vertical; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
    .circle { 
 
    border-radius: 50%; 
 
    height: 40px; 
 
    text-align: center; 
 
    width: 40px; 
 
    margin: 0px 60px; 
 
    line-height: 40px; 
 
    z-index: 3; 
 
    position: relative; 
 
    } 
 

 
    li::before{ 
 
    content: ''; 
 
    position: absolute; 
 
    top: calc(50% + 7px); 
 
    width: 150px; 
 
    height: 2px; 
 
    background: grey; 
 
    z-index: 1; 
 
    } 
 

 
    li:last-child::before { 
 
    display:none; 
 
    } 
 

 
    .white-circle { 
 
    background-color: white; 
 
    border: 2px solid grey; 
 
    color: grey; 
 
    } 
 

 
    .grey-circle { 
 
    background-color: grey; 
 
    color: white; 
 
    } 
 

 
    .red-circle { 
 
    background-color: red; 
 
    color: white; 
 
    -webkit-box-ordinal-group: 1; 
 
    -moz-box-ordinal-group: 1; 
 
    -ms-flex-order: 1; 
 
    -webkit-order: 1; 
 
    order: 1; 
 
    } 
 

 
.red-circle:before { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 50px; 
 
    height: 2px; 
 
    left: -49px; 
 
    top: 50%; 
 
    background: gray; 
 
} 
 

 
.invoice-state ul .invoice-state:after { 
 
    content: " "; 
 
    position: absolute; 
 
    width: 2px; 
 
    height: 80px; 
 
    background: gray; 
 
    transform: rotate(-40deg); 
 
    left: -15px; 
 
    top: -50px; 
 
} 
 

 
.green-circle { 
 
    background-color: green; 
 
    color: white; 
 
    }

<ul> 
 
    <li class="invoice-state"> 
 
     <div>NOT SENT</div> 
 
     <div class="circle white-circle">1</div> 
 
    </li> 
 
    <li class="invoice-state"> 
 
     <div>SENT</div> 
 
     <div class="circle grey-circle">12</div> 
 
    </li> 
 
    <li class="invoice-state"> 
 
     <div>VIEWED</div> 
 
     <div class="circle grey-circle">4</div> 
 
    </li> 
 
    <li class="invoice-state"> 
 
     <div>PAID (30 DAYS)</div> 
 
     <div class="circle green-circle">3</div> 
 
    </li> 
 
    <li class="invoice-state"> 
 
     <div>DEPOSITED (30 DAYS)</div> 
 
     <div class="circle green-circle">3</div> 
 
     <ul> 
 
     <li class="invoice-state"> 
 
      <div>FUNDS ON HOLD</div> 
 
      <div class="circle red-circle">2</div> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul>