Html 带连接线的弯角盒

我正在尝试创建一对盒子，里面有文本和一条连接它们的线。我为每个框创建了一个类，如下所示：

.box {
  background: white;
  border: 1px solid black;
  color: black;
  border-radius: 8px;
  padding: 8px 20px;
  margin: 20px;
}

<div fxLayout="row" fxLayoutAlign="space-between">
       <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
         <div>
           {{box.firstText}}
         </div>
         <div>
            {{box.secondText}}
         </div>
          <hr> //Addded here
       </div>
    </div>

然后，为了创建一对盒子，我有以下内容：

<div fxLayout="row" fxLayoutAlign="space-between">
   <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
     <div>
       {{box.firstText}}
     </div>
     <div>
        {{box.secondText}}
     </div>
   </div>
</div>

{{box.firstText}
{{box.secondText}

我试图添加一条连接每个框的水平线，因此我尝试在每个循环中的框末端添加一个

标记，如下所示：

.box {
  background: white;
  border: 1px solid black;
  color: black;
  border-radius: 8px;
  padding: 8px 20px;
  margin: 20px;
}

<div fxLayout="row" fxLayoutAlign="space-between">
       <div class="box" *ngFor="let box of boxes" fxLayout="column" fxLayoutAlign="start center">
         <div>
           {{box.firstText}}
         </div>
         <div>
            {{box.secondText}}
         </div>
          <hr> //Addded here
       </div>
    </div>

{{box.firstText}
{{box.secondText}
//添加到此处

但是这句话在任何地方都没有出现