0

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 ?

Arash Younesi
  • 1,671
  • 1
  • 14
  • 23
  • Does this answer your question? [:after and :before pseudo-element selectors in Sass](https://stackoverflow.com/questions/10750563/after-and-before-pseudo-element-selectors-in-sass) – bassxzero Oct 26 '21 at 10:05
  • @bassxzero No, I don't have problem with `sass` syntax. I need `::before` in scoped style in vuejs – Arash Younesi Oct 26 '21 at 10:08

1 Answers1

3

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;
}
Markiesch
  • 721
  • 3
  • 11