Wie dieses Diagramm mit Pseudo-Elementen emulieren

Question

Ich versuche, das folgende Diagramm zu erstellen:

Ich kann Kreise und gerade Linien unter Code-Schnipsel mit ziehen. Bitte helfen Sie mir, gekrümmte Linie und roten Kreis zu zeichnen. Ich habe das Bild angehängt. Ist dies mit CSS-Pseudoelementen möglich?

<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

Ich hielt Ihre HTML-Layout die gleiche, mit Ausnahme der roten Kreis, wo ich eine andere ul Nest hatte> li (gleiche Layout wie die anderen) in den li. Ich war nicht in der Lage, die Linie gekrümmt zu machen, ohne weitere Untersuchungen an meinem Ende durchzuführen, aber ich konnte die Linie mit Pseudoelementen versehen. Hoffe das hilft. 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>