vue动态修改伪元素样式

可以通过使用 `::before` 或 `::after` 伪元素来实现动态修改样式。具体实现方法如下：

1. 在 CSS 中定义伪元素的样式，例如：

.my-element::before {
 content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
}

2. 在 Vue 组件中使用 `$refs` 获取元素，并通过 `style` 属性修改伪元素的样式，例如：

<template>
  <div class="my-element" ref="myElement"></div>
</template>

<script>
export default {
  mounted() {
    const myElement = this.$refs.myElement;
    myElement.style.setProperty("--my-color", "blue");
  }
};
</script>

<style>
.my-element::before {
  background-color: var(--my-color);
}
</style>

在上面的代码中，我们使用了 CSS 变量 `--my-color` 来定义伪元素的背景颜色，并在 Vue 组件中通过 `style.setProperty()` 方法动态修改了这个变量的值。