在内联列表元素之间添加水平线

Question

我正在尝试使用以下HTML构建步骤进度栏：

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.container {
  width: 100%;
  position: absolute;
  z-index: 1;
  margin-top: 20px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  float: left;
  width: 15%;
  position: relative;
  text-align: center;
}

.fr-inactive-radio {
  background: #CFD7E6;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>

这导致以下结果：

我想在子弹之间添加水平线，如下所示：

如何最好地在仅使用CSS创建的点之间添加水平线？

Answer 1

您可以像这样使用渐变：

.fa-check-circle {
  color: #5EB4FF;
}

.fa-circle {
  color: #CFD7E6;
  font-size: 14px;
}

.progressbar {
  list-style-type: none;
  display: flex;
  align-items: center;
  padding:0;
    background: 
    linear-gradient(to right,transparent 0,transparent calc(15% * 4),#fff calc(15% * 4)) calc(15% * 5) no-repeat,
    repeating-linear-gradient(to right,transparent 0,transparent 20px,blue 20px, blue calc(15% - 5px),transparent calc(15% - 5px),transparent 15%) 0 50%/100% 5px no-repeat;
}

.divider {
  flex-grow: 1;
  border-bottom: 1px solid black;
  margin: 5px
}

.progressbar li {
  width: 15%;
}
.progressbar li span {
  width:20px;
  display:inline-block;
}

.fr-inactive-radio {
  background: #CFD7E6;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="progressbar m-0">
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-check-circle mt-1 progress-dot"></i></span>
  </li>
  <li>
    <span><input type="radio" checked="checked" class="progress-dot"></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
  <li>
    <span><i class="fa fa-circle progress-dot"></i></span>
  </li>
</ul>