Javascript 在直线末端用圆连接两个div

我正在制作一些卡片来显示一种时间线，我想通过一些卡片div来实现这一点，这些卡片div的内容与一条线相连，并且在每一条线的末端都有一个圆圈，以使其看起来很好。目前我只有卡，我不知道如何制作连接线。我现在有这样的东西：

HTML:

JSFiddle：

---

我想要这样的东西：

请按照上述步骤操作

HTML

---

在同一条线上你想要多少钱？例如，两张卡片，一行三张卡片你想要连接线文本吗？不，不是文本。我只想要连接卡片和圆圈的线。一行有多少张卡并不重要，我只需要能够根据需要添加和删除。确定后会给出答案。。等等。。15分钟。

<div class="card-wrapper">
   <div class="card">
   </div>

   <div class="card">
   </div>
</div>

.card-wrapper {
   display: flex;
   align-items: center;
   align-content: center;
   flex-direction: row;
}

.card {
   width: 15rem;
   height: 25rem;
   background-color: #4090ff;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   margin: 2rem 4rem;
   box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
}

<div class="card-wrapper">
  <div class="card">
    <div class="card-inner"></div>
  </div>
  <div class="card">
    <div class="card-inner"></div>
  </div>
  <div class="card">
    <div class="card-inner"></div>
  </div>
  <div class="card">
    <div class="card-inner"></div>
  </div>
</div>

.card-wrapper {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: row;
}
.card {
  width: 15rem;
  height: 25rem;
  background-color: #4090ff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 2rem 4rem;
  box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
  position: relative;
}
.card::after {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: #4090ff;
    border-radius: 50%;
    border: 6px solid #fff;
    content: "";
}
.card::before {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background-color: #4090ff;
    border-radius: 50%;
    border: 6px solid #fff;
    content: "";
    z-index: 9;
}
.card:first-child::before,
.card:last-child::after,
.card:first-child .card-inner::before,
.card:last-child .card-inner::after {
    display: none;
}
.card-inner {
    width: 100%;
    height: 100%;
}
.card-inner::after {
    position: absolute;
    right: -65px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000;
    content: "";
    width: 65px;
    height: 4px;
}
.card-inner::before {
    position: absolute;
    left: -65px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #000;
    content: "";
    width: 65px;
    height: 4px;
}