ブートストラップ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

これはホバー上の表の上部に線を引くための責任のコードです。問題は、私はどのように各テーブルの左上隅にこの小さな緑の矩形を非表示にするか分からないです。私はボーダーホワイトを作成し、顧客のホバーテーブルに戻ってグリーンに変更しようとしていました。機能しますが、フェード効果が表示されます。私はそれを今のまま保つことを好むでしょう、ちょうどこの四角形を取り除いてください。

Answer 1

:afterから境界線を削除し、代わりにheight: 3pxを追加し、また: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%; 
      }