使用`::after`在每个循环列表元素下面画一条分隔线，如何删除最后一个元素下面的分隔线？

Question

如题，.card绑定的元素是使用v-for循环的列表（vue项目），如何不显示最后一条线？
尝试使用 &:not(:last-child)::after ，没成功。

.container {
 .card {
      position: relative;
      width: auto;
      margin: 25px 0 50px 0;
      &::after {
        content: '';
        width: 886px;
        height: 1px;
        position: absolute;
        bottom: -25px;
        background-color: #DDDDDD;
      }
 }
}

新增部分如下：
与处理border-bottom类似，最后一个.card元素，margin-bottom也需要单独设置不同的值。&:last-child 和 &:nth-last-child(1)目前都没生效。

<div class="container">
  <div class="card"  v-for"xxx"> <!-- 循环列表 -->
      列表...
  </div>
</div>

.container { 
  .card {
        margin: 25px 0 50px 0;
   }
  &:nth-last-child(1) {
    margin: 25px 0 0 0;
  }
}

Answer 1

其实很简单啊，只需要对最后一个元素的 :after 伪类处理一下就好了。

.card{
   //...
   &:after{
     //...
   }
   &:last-child{
     &:after{
       display:none;
     }
   }
}

Answer 2

:last-child找的是父元素的最后一个元素，你的card下面应该还有别的元素存在，导致样式失效/没达到预期，nth-last-child同理，你这里给相同card套一个父元素就可以解决两个问题

也可以使用:has进行解决，但是要注意他的兼容性

.card:has(+ .card)::before {

}

楼上@陟上晴明 给出的样式重置也是一种解决方法，我一般喜欢特制第一个元素，因为比较好实现，但是不一定满足你的业务需求

.card + .card::after {

}

---

按照你的元素结构完全可以使用not和last-child、nth-last-child，但你要注意这些是需要写在子元素card上的

.card:not(:lase-child)::after{

}
.card:nth-last-child(1) {

}