如何在Vue.js的scoped样式中正常使用::before等伪选择器

问题根因 #

::before伪类不生效和scoped样式没有关系，核心是你遗漏了CSS伪元素必填的content属性，所有::before、::after伪元素都必须显式声明content属性，浏览器才会渲染对应的伪元素节点。

修正方案 #

给.subline::before规则添加content: '';即可，修改后的完整样式代码如下：

<style scoped lang="scss">
.subline {
  border-bottom: dashed 2px #eee;
  display: block;
}
.subline::before {
  content: ''; /* 新增这一行即可生效 */
  width: 30px;
  height: 20px;
  z-index: 99999;
  border-bottom: dashed 2px green;
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>

拓展排查点 #

如果后续确实遇到scoped样式不生效的场景，可排查以下常见问题：

• 你要修改的是子组件内部非根节点的样式，需要配合深度选择器使用（Vue2用::v-deep，Vue3用:deep()）
• 你写的选择器优先级低于其他已生效的样式，可通过提升权重的方式解决
• 类名、选择器拼写错误

内容的提问来源于stack exchange，提问作者Arash Younesi