.item {
    position: relative;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
    cursor: pointer;
    // background: #49b1f5;
    border-width: 5px;
    margin: 5%;
}
.item::before{
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  transition: all 0.2s;
  border: 2px solid #000;
  
  top: -15px;
  left: -15px;
  // background: green;
  border-right: none;
  border-bottom: none
}

.item::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  // background: red;
  transition: all 0.2s;
  border: 2px solid #000;
  
  bottom: -15px;
  right: -15px;
  border-left: none;
  border-top: none
}

.item:hover {
  &::after, &::before {
    width: calc(100% + 15px + 13px);
    height: calc(100% + 15px + 13px);
  }
}