Hidding obere Grenze in Bootstrap 4

Question

Ich versuche, einfache Preistabelle mit Bootstrap 4 Kartenelement zu bauen, aber ich kann keine Lösung für ein Problem finden.

.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

Dies ist Code für das Zeichnen Linie verantwortlich in oberen Teil der Tabellen auf dem schweben. Das Problem ist, ich habe keine Ahnung, wie man dieses kleine grüne Rechteck in der linken oberen Ecke jedes Tisches versteckt. Ich habe versucht, Grenze weiß zu machen und grün zu werden, sobald Kunde Hover-Tabelle. Es funktioniert, aber dann ist der Fade-Effekt sichtbar. Ich würde es vorziehen, es so zu behalten, wie es jetzt ist, nur irgendwie dieses Rechteck loszuwerden.

Answer 1

Entfernen Grenze von :after und height: 3px statt hinzufügen, auch Grenze von :after auf :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%; 
      }