美文网首页Web前端之路让前端飞
::after ::before 伪元素动态改变content内

::after ::before 伪元素动态改变content内

作者: 小光啊小光 | 来源:发表于2020-04-24 19:17 被阅读0次

    很多时候需要给元素加上个小标签,这时候伪元素经常会被用到,但是呢,有些时候小标签的内容是不固定的,比如好几个菜品,每个菜品都有不同的点赞数。所以如果还用伪元素的话,设置content内容动态化就是关键。

    办法

    1. 动态渲染元素时,指定自定义属性

      // vue
      <li v-for="(e,i) in list" :data-star="e.star" style="color: #fff"></li>
      
    1. 对应的css样式

      li::after{
          content: attr(data-star) /* 伪元素动态获取内容 */
          /* 其他的此处省略 */
      }
      
      /* 当然 attr(style) 同样可以获取style的内容,并不严格要求一定用自定义属性 */
      

    相关文章

      网友评论

        本文标题:::after ::before 伪元素动态改变content内

        本文链接:https://www.haomeiwen.com/subject/unrqwhtx.html