javascript - 如何使用伪元素模拟此图

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>li(与其他布局相同)嵌套到 li 中的红色圆圈。如果不做更多的研究，我无法使线 flex ，但是我能够用伪元素制作线。希望这可以帮助。 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>