부트 스트랩 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%; 
      }