鍍金池/ 問(wèn)答/HTML/ 偽類(lèi) :after 設(shè)置無(wú)效，求問(wèn)原因

偽類(lèi) :after 設(shè)置無(wú)效，求問(wèn)原因

準(zhǔn)備給樹(shù)狀組件增加層級(jí)分割線，需要用偽類(lèi)設(shè)置樣式，但是無(wú)效。
代碼如下：

#tree-wrap {
  .el-tree-node.is-expanded {
    position: relative;
    >.el-tree-node__children::after{
      content: '';
      position: absolute;
      top: 25px;
      bottom: 0;
      left: 40px;
      height: calc(100% - 50px);
      border-left: 1px dashed #666;
    }
  }
}

但是在DOM里沒(méi)有看到對(duì)應(yīng)的 ::after，
clipboard.png

求問(wèn)原因。

回答
編輯回答
夢(mèng)囈

【破案】查出原因了，用的 scss標(biāo)簽 <style lang="scss" scoped>的scoped干擾了，去掉scoped，偽類(lèi)正常出現(xiàn)。而刪除 scoped屬性、可以以組件為單位、對(duì)樣式進(jìn)行id劃分：(以下為示例)

#xxx {
  .yyy {...}
  EE.zzz {...}
  ...
}
2017年9月26日 01:58
編輯回答
網(wǎng)妓

下面styles找一下寫(xiě)的::after樣式，看一下是不是全中不夠被覆蓋了

2017年3月18日 21:14
編輯回答
笨尐豬

你覺(jué)得你截的圖能看出來(lái)啥，截圖截這么窄，咋，怕擠到啊
你的after是在children上加的，你找的位置是哪，是children的父元素；
after偽元素全在children里面好么

2018年1月14日 22:19
編輯回答
北城荒

是SASS嗎？我寫(xiě)了簡(jiǎn)單的測(cè)試demo，把你的代碼代入試了一下是有::after的，你再檢查一下代碼吧。
圖片描述

2018年3月24日 11:18