腦補： 偽元素 vs 偽類

偽元素： before after ...
    ——最好是使用 &::after

偽類： hover select nth-child ...
    ——一般用法 a:hover{}

接下來的都是套路

1. 給元素創造偽元素

    a::after{
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color
        content: ' '
 

    }

1. 給上面的a設定class 讓他的偽元素縮放

    //html
    <a class="border-1px"></a>

    //style 根據不同的螢幕，設定不同的縮放比例
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
      .border-1px
        &::after
          -webkit-transform: scaleY(0.7)
          transform: scaleY(0.7
 
)

    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
      .border-1px
        &::after
          -webkit-transform: scaleY(0.5)
          transform: scaleY(0.5)

1. 大功告成 現在去手機端測試

win+R => cmd =>ipconfig
檢視到  IPv4 地址 . . . . . . . . . . . . : 192.168.x.xx
將瀏覽器的地址localhost:8080
 
 => 192.168.x.xx:8080
開啟http://cli.im/ 將網站生成二維碼
手機掃描開啟