Vue动态修改伪元素样式

如何动态修改伪元素样式?

1.css中如何用变量

声明css变量的时候，变量名前面要加两根连词线（–）。
变量名大小写敏感，–header-color和–Header-Color是两个不同变量。
var()函数用于读取变量。
var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

<style>
body {
  --highlight-color: green;
}
.container {
  --highlight-color: red;
}
a {
  color: var( --highlight-color );
}
</style>
<body>
  <div class="container">
    <a href="">Link</a>
  </div>
</body>

2.根据css中使用变量的方法,我们可以结合vue中动态行内样式进行伪元素动态属性设置

<template>
    <div class="test">
        <span :style="spanStyle" class="span1">hello world</span>
        <br>
        <span :style="{'--width': widthVar}" class="span2">hello earth</span>
    </div>
</template>
<script>
export default {
    data() {
        return {
            spanStyle: {
                "--color": "red"
            },
            widthVar: "100px"
        };
    }
}
</script>
<style scoped>
    .span1 {
        color: var(--color);
    }
    .span2 {
        text-align: center;
        position: relative;
        width: var(--width);
    }
    .span2::after {
        content: '';
        display: block;
        position: absolute;
        left: 100%; 
        width: var(--width);
        height: var(--width);
        border-radius: 50%;
        border: 2px solid black;      
    }
</style>

 

posted @ 2021-04-20 14:45  夏小夏吖  阅读(3767)  评论(0)    收藏  举报