2020-08-26 动态修改伪类(::before,::after)的值

场景：用伪类给元素添加一些文字，但是元素是动态渲染出来的

给元素添加 data-content 属性(利用h5的data-实现)

<ul class="content">
  <li v-for="(item,index) in data" :key="index"  :data-content="index+1"></li>
</ul>

li{
  &::before {
    content: attr(data-content);
    position: absolute;
    top: 64px;
    width: 100%;
    text-align: center;
    font-family: PangMenZhengDao;
    font-size: 20px;
    color: #fff;
  }
}