javascript - 在行尾用一个圆圈连接两个 div

Question

我正在创建一些卡片来显示一种时间线，我想通过让一些卡片 div 的内容与一条线相连，并在每一行的末端都有一个圆圈，以使其看起来不错. 目前我只有卡片，我不知道如何制作连接线。我目前有这样的事情：

HTML：

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

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

CSS：

.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);
}

JSFiddle：https ://jsfiddle.net/L3h9xe5d/10/

我想要这样的东西：

Answer 1

请按照上述步骤..

HTML

<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>

css

.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;
}