Css 边框底部未延伸到标记下的全宽（角度）

我希望列表中标记的边框底部延伸到其全长。然而，它只涵盖了标签，我相信这是因为我如何设置东西。我正在用英语写代码

html代码：

<fa (click)="backToHome()" class="arrow" name="chevron-left"></fa>
<h1>جستجو</h1>
<br /><br /><br /><br />
  <div class="search">
    <input class="input" [(ngModel)]="item" required placeholder="جستجو میان محصولات و برندها" />
    <fa class="icon" name="search" (click)="fetchProducts()"></fa>
  </div>
<p>تاریخچه جستجو</p>
<br />
<br />

  <ul *ngIf="resultSearch && resultSearch.length">
    <li *ngFor="let product of resultSearch">
        <a (click)="backToHome()">{{product.name}}</a>
    </li>
  </ul>
<p *ngIf="condition()">!نتیجه ای یافت نشد</p>

<router-outlet></router-outlet>

现在的情况 它应该是什么样的

给它一个class=随便什么。然后在CSS中执行.which{display:block；}。这将使链接占据li父级的全部宽度

---

尝试给父元素一个底部边框？给它一个class=whatever。然后在CSS中执行.which{display:block；}。

.search{
    position: relative;
    width: 330px;
    height: 40px;
    line-height: 40px;
    padding: 0px;
    margin: 5px;
    border-radius: 6px;

}
.input{
    background: #e7e5e5;
    width: 90%;
    height: 30px;
    font-size: 15px;
    border-radius: 6px;
    padding: 5px 15px; 
    text-align: right;
    line-height: 30px;
    overflow: hidden;
    display: block;
    outline: none;
    border: none;
    box-sizing: border-box;
}
.history{

    color:grey;

}
.icon{
    position: absolute;
    left: 5px;
    top: -3px;
    color:grey;
    cursor: pointer;
}
.arrow{

    position: absolute;
    top:20px;
    left: 5%;
    color: gray;
    cursor: pointer;

}
h1{
    position: absolute;
    right:40px;
    float: right;
}
p{

    position: absolute;
    right:0;
    color: grey;
}
::placeholder{
    font-family: iransans;
    color: grey;
}
ul{
    border:1px solid red;
    list-style: none;
    float: right;
    display: block;

}
ul li a{

    cursor: pointer;
    border-bottom: 1px solid grey;
    border-width: thin;
    color: grey;
    text-decoration: none;
}

<ul *ngIf="resultSearch && resultSearch.length">
    <li *ngFor="let product of resultSearch">
        <a (click)="backToHome()" class="whatever">{{product.name}}</a>
    </li>
</ul>
<style>
  .whatever { display: block; }
</style>

ul li a { display: block; }