如何使用 after 删除列表项中最后一个子项的边框

Question

在我的应用程序中，我在列表项中的 i 标记中有一些字体图标，在每个图标之后我都放置了一些边框线。

但我的要求是删除列表项中最后一个元素的边框。

.component.html

<div class="list-container">
<ul>
   <li *ngFor="let icon of iconsArr">
    <span class="icons" [style.font-weight]="icon.active ? 'bold' : 'normal'" ></span><i (click)="onIconClick(icon)" class="smiley-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;
}

如果我写


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

它不起作用，我想从图标列表中删除最后一个图标的边框

Answer 1

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

请尝试类似的操作，或者

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

Answer 2

您要定位的最后一个子元素是 li 元素而不是 span。

所以使用：

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

如何使用 after 删除列表项中最后一个子项的边框

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

html

css

css-selectors

pseudo-element