Horizontal dashed line between items in ngFor - css

Question

I am using ngFor for displaying a list of items which are separated by a horizontal dashed line as follows:
<div *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
<div class="dashed-line-box" *ngIf="!lastItem">
<hr class="new1">
</div>
</div>
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-style: solid;// to outline the container box
border-width: thin;
}
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed;
}
I can see rectangles for each dashed-line-box entry, but they dont contain horizontal like I am expecting.
What am I missing here?

Answer 1

I think you want a dashed border style in <hr>
hr.new1 {
position: absolute;
margin-top: 8px;
border-top: 1px dashed blue;
width: 100%;
}
or if you want a dashed border on outer div try below code
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
border-bottom: 1px dashed green;
}

Answer 2

css property border-style: solid; from class .dashed-line-box is putting the box in the last line;To get a horizontal bar, you need to remove position:absolute from the class hr.new1;
relevant css:
p {
font-family: Lato;
}
.dashed-line-box {
position: relative;
background-color: #ffffff;
width: 320px;
height: 16px;
/* border-style: solid;*/
border-width: thin;
}
hr.new1 {
margin-top: 8px;
border-top: 1px dashed;
}
working stackblitz here

Answer 3

Why you need hr when you can achieve this using border bottom property. Just add one class to parent div and use border bottom.
.box {
border-bottom: 1px dashed;
}
<div class="box" *ngFor="let comment of comments;let lastItem = last;">
<div class="comment-box">
<div class="comment-author">{{comment.createdBy}}</div>
<div class="creation-date">{{comment.createdOn}}</div>
<div class="comment-text">{{comment.text}}</div>
</div>
</div>