最近做文本标注的项目,其中有个排序标记的需求,需要使用 js 动态修改元素的伪元素 beforeaftercontent 的内容。

CSS3 attr函数

代码展示

<template> <div class="list"> <div v-for="(item, index) in list" :key="item.id" :data-index="index" class="item"></div> </div> </template> <script setup lang="ts"> let list = [ { id: 1, text: "山重水复疑无路" }, { id: 2, text: "柳暗花明又一村" }, ] </script> <style lang="scss"> .item { position: relative; border: 1px solid red; font-size: 20px; &:before { content: attr(data-index); position: absolute; top: -10px; display: inline-block; color: pink; } } </style>

css attr函数

  • 这里的关键就是css的 attr 函数可以获取到对应html标签的属性。从而可以通过改变数据来修改元素的伪元素 beforeaftercontent 的内容。
  • 当然也可以通过js操作DOM属性的形式去动态修改。
itemEle.setAttribute("data-index","100")

欢迎访问:天问博客