修改css伪元素的属性值

1.使用data-*更改伪元素的content，只能更改content属性，其他属性不能更改。

<style>
 .hei{
    background-color: rgb(20, 201, 20);
    width: 200px;
    height: 50px;
    border: 1px solid red;
  }
  .hei::after{
    content: attr(data-text);
    display: block;
  }
  </style>
<body>
<div class="hei" data-text='我是要传递给伪元素的数据'></div>
<script>
let hei = document.querySelector('.hei')
hei.addEventListener('click',function(){
    this.dataset.text = '哈哈哈，点击换数据'
    console.log(this.dataset)//获取所有的data属性
})
  </script>
</body>

2.创建多个class，切换class实现效果

<style>
.btn,.btntibu{
      width: 200px;
      height: 50px;
      background-color: rgb(21, 194, 59);
      /* outline: none; */
      border: none;
      justify-content: center;
      align-items: center;
    }
    .btn::after{
      display: inline-block;
      content: '';
      width: 3px;
      height: 3px;
      border-radius: 50%;
      /* animation: move 1s ease-out infinite ; */
    }
    .btntibu::after{
      display: inline-block;
      content: '';
      width: 3px;
      height: 3px;
      border-radius: 50%;
      animation: move 1s ease-out infinite ;
    }
    @keyframes move {
      30%{
        box-shadow: 3px 0 0 currentColor;
      }
      60%{
        box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor;
      }
      90%{
        box-shadow: 3px 0 0 currentColor, 9px 0 0 currentColor, 15px 0 0 currentColor;
      }
    }
</style>
<button class="btn">提交</button>
<script>
 btn.addEventListener('click',function(){
      this.classList.remove('btn')
      this.classList.add('btntibu')
 })
</script>

伪元素的box-shadow制作加载中动画效果图

参考：http://www.bubuko.com/infodetail-2598112.html