伪元素 after 动态添加内容

CSS区域        attr(data-after)  这个是关键

      ::v-deep .el-slider__marks-text {
          margin-top: 30px;
          font-size: 14px;
          font-family: Source Han Sans, Source Han Sans;
          font-weight: 700;
          color: #3d3d3d;
          line-height: 22px;
          &::before {
            content: '';
            display: inline-block;
            position: absolute;
            left: 47.5%;
            top: -16px;
            transform: translateX(-50%);
            width: 4px;
            height: 14px;
            background: #ffce00;
            border-radius: 4px 4px 4px 4px;
          }
          &::after {
            content: attr(data-after);
            font-size: 12px;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            color: #979797;
            line-height: 22px;
            position: absolute;
            left: 85px;
            top: -59px;
            width: 100px;
          }
        }

在 onMounted  里面执行 

    //  进度条 时间控制
    await nextTick()
    const element = document.querySelectorAll('.el-slider__marks-text')
    for (let i = 0; i < element.length - 1; i++) {
      element[i].setAttribute('data-after', channelDetailObj.value.timeEventCounts[i])
    }
  }