[CSS] table點擊表格(td)，然後將4邊邊框都換顏色

下圖是 table 表格某一個td的初始動態：

下圖是點擊上面那個 td 之後，加上 active 這個 class 後的狀態：

// 上面的 scss 如下：
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    i{
      display: inline-block;  
    }
  }
}

這時會發現只有右邊框、下邊框有換色成功，那左邊框、上邊框呢？只要善用 :before 、 :after 即可達成(加上藍字部份)：

// 更新後的完整 scss 如下：
td{
  border:1px solid #ccc;
  text-align: center;
  cursor: pointer;
  position: relative;
  i{
    position: absolute;
    left:50%;
    top:50%;
    margin-top: -7px;
    margin-left: -22px;
    display: none;
  }
  &.active{
    color:green;
    background-color: #E8FEDC;
    border:1px solid #59AE35;
    &:before{
      content: "";
      background-color: #59AE35;
      height: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      right:-1px;
    }
    &:after{
      content: "";
      background-color: #59AE35;
      width: 1px;
      position: absolute;
      top:-1px;
      left:-1px;
      bottom:-1px;
    }
    i{
      display: inline-block;  
    }
  }
}

如圖：