如何在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;
}