利用setAttribute 和content: attr() 以及 before 解决组件内新增样式赋值

遇到一个场景 使用第三方UI库进行二次开发
设计师的UI稿子需要在已有的组件上在增加样式
组件却没有合适接口的接口来新增

这时候就可以用

before 来 新增样式

.range-handle:before {
    content: ' ';
    display: block;
    height: 0.8rem;
    width: 0.8rem;
    background: @SecondaryColor;
    border-radius: 50%;
  }

setAttribute 和 content: attr() 来动态赋值

.range-handle:after {
    content: attr(data-range);
    display: block;
    position: absolute;
    transform: translate3D(0, -2.5rem, 0);
  }

document.getElementsByClassName('range-handle')[0].setAttribute('data-range', this.range)

一般用来动态赋值的自定义属性 data-range 没有怎么办？
页面渲染之后给::before的dom元素附值