动态修改伪元素

<div
  v-for="i in tabList"
  :key="i"
  :class="{
    active: current == i.id,
  }"
  :style="{
    '--color': current == i.id ? '#f00' : '#ccc',
  }"
>
  {{ i.label}}
</div>

.active {
  color: var(--color);
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 50px;
    height: rpx;
    background: var(--color);
  }
}