带连接线的角形柔性盒

Question

我正在尝试创建几个带有文本框和将它们全部连接起来的线的框。我为每个框创建了一个这样的类：

.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>
   </div>
</div>

我试图添加一条水平线来连接每个框，所以我试图在每个循环的框末添加一个<hr>标签，如下所示：

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

但是此行不会在任何地方显示