如何在 vuejs 范围样式中使用像 ::before 这样的伪选择器

Question

考虑以下样式：

<template>
  <!-- Some Tags -->

 <div class="mb-8 w-full">
   <span class="subline"></span>
 </div>

</template>

.
.
.


<style scoped lang="scss">

.subline {
  border-bottom: dashed 2px #eee;
  display: block;
}

.subline::before { /* Not working ! */
  width: 30px;
  height: 20px;
  z-index: 99999;
  border-bottom: dashed 2px green;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>

我需要使用 ::before 但不起作用！

我怎样才能做到这一点？

Answer 1

伪元素需要content 属性可见，添加content: ""解决此问题

.subline::before {
  content: "";
  width: 30px;
  height: 20px;
  z-index: 99999;
  border-bottom: dashed 2px green;
  position: fixed;
  bottom: 0;
  left: 0;
}

如何在 vuejs 范围样式中使用像 ::before 这样的伪选择器

How to use pseudo selectors like ::before in vuejs scoped style

css

sass

vue.js

vuejs3

scoped