将两个div连接到直线末端

Question

我正在创建一些卡片来显示一种时间轴，我想通过使一些卡片div的内容与一条直线相连，并在该直线的两端分别带有一个圆圈来做到这一点看起来不错。目前，我只有卡，无法弄清楚如何制作连接的线。我目前有这样的东西：

HTML：

      {
        loader: 'sass-loader',
        options: {
          sassOptions: {
            includePaths: [
              ['./node_modules']
            ]
          }
        }
      }

CSS：

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

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

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

我想要这样的东西：

Answer 1

请按照上述步骤操作。.

HTML

def myFunc():
        myValue = "Hello World!"
        print (myValue)


myFunc()

css

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