元素的伪元素的 content

点击更换显示

查看代码

<template>
  <div class="container">
    <a-button data-text="button1 before" class="item1">button1</a-button>
    <br />
    <br />
    <p>点击更换显示</p>
    <a-button :data-text="content" class="item2" @click="doChange">button2 鼠标悬浮显示</a-button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const content = ref('abab')

const doChange = () => {
  content.value = Math.random().toString(16).slice(-4)
}
</script>

<style lang="less" scoped>
.item1 {
  position: relative;
  &::before {
    content: attr(data-text);
    display: block;
    position: absolute;
    color: red;
    right: -100px;
  }
}

.item2 {
  position: relative;
  &::after {
    content: attr(data-text);
    display: none;
    position: absolute;
    color: blue;
    top: 0;
    right: -100px;
  }
  &:hover::after {
    display: block;
  }
}
</style>