stylus中使用before,after等伪元素及伪类写了没有效果

发布于 2022-09-11 15:57:10 字数 1013 浏览 24 评论 0

问题描述

before,after等伪元素及伪类写了没有效果

问题出现的环境背景及自己尝试过哪些方法

项目框架:iview + vue + stylus 搭建后台系统,在stylus中无法写出伪元素和伪类的效果,比如.clearfix:after 和其他想使用的::before ::after的等等

以为是iview.css的问题,把在main.js引入的iview.css注释掉仍然无济于事

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

.clearfix
  height 1%
  zoom 1
  clear: both
  overflow: hidden
  &:after
    content: " "
    display:block
    height:0
    visibility:hidden
    font-size:0
    clear:both
    overflow: hidden
    

.top-info
  margin-bottom: .3rem
  &>span
    position: relative
    display: inline-block
    font-size: .2rem
    color: #333333
    margin-left: .4rem
    &:first-of-type
      margin-left: 0
    &:before
      /*position: absolute*/
      content: 'hello'
      /*display: inline-block*/
      color: $warning
      /*width: .3rem*/
      /*height: .3rem*/
      font-size: .3rem
      background:$warning

你期待的结果是什么?实际看到的错误信息又是什么?

控制台element标签下检查元素是否生成伪类,然而并没有

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

草莓酥 2022-09-18 15:57:10

伪元素是两个冒号,伪类是一个冒号的。
after,before称为伪元素所以把&:after换成&::after就可以了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文