Vue3 & TypeScript ---- 伪元素动态样式

作者: 牛会骑自行车 | 来源:发表于2023-09-25 16:17 被阅读0次

动态绑定实现改变伪元素等样式attr( data-number)
如何用js改变伪元素样式
伪类与伪元素
动态修改伪元素样式
CSS基础之伪类伪元素&样式优先权
IE8-伪元素重绘
CSS-》伪类和伪元素
伪类与伪元素
CSS进阶知识点--CSS3伪类选择器和伪元素
TypeScript学习资源汇总

效果图

<script lang="ts" setup>
const beforeWidth = ref('50px');
</script>

<template>
  <div class="fake-view" :style="{'--width': beforeWidth}"></div>
</template>

<style lang="scss" scoped>
.fake-view {
  height: 40px;
  background: lightgrey;
  position: relative;
}
.fake-view::before {
  content: '';
  display: block;
  width: var(--width);
  height: 100%;
  background: red;

  position: absolute;
  top: 0;
  left: 0;
}
</style>

动态绑定实现改变伪元素等样式attr( data-number)
情景三：动态绑定实现改变伪元素等样式描述：以上样式都是我们最普通的样式，但是我们如何通过绑定样式改变伪元素（::b...
如何用js改变伪元素样式
通常设置伪元素的样式直接用CSS很方便可是有时候想用js动态的去改变伪元素的样式，但是js获取不到伪元素，这就很...
伪类与伪元素
伪类伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化伪元素伪元素用于...
动态修改伪元素样式
如图的导航，点击切换，下面的横线会滑动到选中的导航下。实现步骤。首先写出横线的样式。这里通过伪元素来实现。lef...
CSS基础之伪类伪元素&样式优先权
伪类&伪元素首字样式控制 —— 使用伪元素::first-letter 首行样式控制 —— 使用伪元素::fir...
IE8-伪元素重绘
页面bug，解决办法：伪元素内容变化参考链接:IE8中伪元素动态作用样式不重绘bug记录 How to forc...
CSS-》伪类和伪元素
伪类：为当前已有的元素的某个状态添加样式，状态会随用户行为动态变化；修饰的元素还在文档树当中；伪元素：创建一些不...
伪类与伪元素
伪类伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态时根据用户行为而动态变化的。 1. a 元素...
CSS进阶知识点--CSS3伪类选择器和伪元素
伪类选择器动态伪类（锚点伪类、用户行为伪类） UI元素状态伪类 CSS3结构伪类否定选择器伪元素动态伪类 ...
TypeScript学习资源汇总
TypeScript安利指南 ☑️ 为 Vue3 学点 TypeScript , 体验 TypeScript ☑️...