cssvue.jssassvuejs3scoped

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

Consider below styles:

<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>

I need to use ::before but does not working !

How can I achieve that ?

Solution

  • Pseudo elements require a content property to be visible, add content: "" to solve this issue

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