在引導中隱藏頂部邊框4

Question

我試圖用引導4卡元素來構建簡單的定價表，但是我找不到解決方案來解決一個問題。

.card { 
    border: 0; 
    border-radius: 0px; 
    -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08); 
    box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08); 
    transition: all .3s ease-in-out; 
    padding: 2.25rem 0; 
    position: relative; 

    &:after { 
     content: ''; 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 0%; 
     border: 3px solid $primary-color; 
     transition: 0.5s; 
    } 

    &:hover { 
     transform: scale(1.05); 
     -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08); 
     box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08); 

     &:after { 
     border: 3px solid $primary-color; 
     width: 100%; 
     } 

Live Codepen

這是負責在上懸停的表的頂部引出配線碼。問題是我不知道如何在每個表的左上角隱藏這個綠色的小矩形。我試圖讓邊框變白，並且一旦客戶懸停表格就變成綠色。它的作品，但後來淡出效果是可見的。我寧願保持它現在，只是以某種方式擺脫這個矩形。從:after

Answer 1

刪除邊框並添加height: 3px代替，也:after上:hover

.card { 
     border: 0; 
     border-radius: 0px; 
     -webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08); 
     box-shadow: 0 3px 0px 0 rgba(0, 0, 0, .08); 
     transition: all .3s ease-in-out; 
     padding: 2.25rem 0; 
     position: relative; 

     &:after { 
      content: ''; 
      position: absolute; 
      top: 0; 
      left: 0; 
      width: 0%; 
      height: 3px; 
      background: $primary-color; 
      transition: 0.5s; 
     } 

     &:hover { 
      transform: scale(1.05); 
      -webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08); 
      box-shadow: 0 20px 35px 0 rgba(0, 0, 0, .08); 

      &:after { 
      width: 100%; 
      }