How to remove the border of last child in list items using after-CodePudding

In my application I have some font icons in i tag within the list items and after the each icons I have placed some border line .

But my requirement is to remove the border of last element in list items.

.component.html

<div >
<ul>
   <li *ngFor="let icon of iconsArr">
    <span  [style.font-weight]="icon.active ? 'bold' : 'normal'" ></span><i (click)="onIconClick(icon)"    [ngClass]="icon.class"
    [style.color]="icon.active === true ? '#FF0000' : '#ffffff'" >
   
 </i>
   </li>
 </ul>
      </div>

.component.css

.list-container{
  li{
    display: inline;
  }
.icons{
    font-size: 2.9em;
    display:inline-block;
    margin: 0px;
    text-shadow: -1.3px 0 #000, 0 1.3px #000, 1.3px 0 #000, 0 -1.3px #000;
    color: white;
    margin-right: -8.9px;
    //z-index:1000;
}
 .icons::after{
    content: "";
    display: inline-block;
    width: 0.8em;
    border-top: 5px solid #e8e8e8;
    top: 50%;
    z-index: -10;
    margin-bottom: 15px;
    margin-left: -8px;
}

If I write


.icons:last-of-type:after{
content:"";
border:none;
}

It is not working, I want to remove the border for last icon from the list of icons

CodePudding user response：

ul li:last-of-type .icons {
    border: none;
}

Please try something like that, or

ul li:last-of-child .icons {
    border: none;
}

CodePudding user response：

It is the li element not the span that is the last child that you want to target.

So use:

.list-container ul li:last-child span.icons::after {
  border: none;
}