<div class="sides-1">1. Hover me</div>
<div class="sides-2">2. Hover me</div>
<div class="sides-3">3. Hover me</div>
<div class="sides-4">4. Hover me</div>
<div class="sides-5">5. Hover me</div>
<div class="sides-6">6. Hover me</div>
<div class="sides-7">7. Hover me</div>

.sides-1 {
  padding: 10px;
}
.sides-1:before,
.sides-1:after {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  border: 3px solid;
  border-right: 0;
  opacity: 0;
  transform: scaleX(var(--s,1)) translate(-25px);
  transition:0s .3s, opacity .3s;
}
.sides-1:after {
  transform-origin: right;
  --s: -1;
}
.sides-1:hover:before,
.sides-1:hover:after {
  opacity: 1;
  transform: scaleX(var(--s,1)) translate(0);
  transition:.4s,opacity 0.3s;
}

.sides-2 {
  padding: 10px;
}
.sides-2:before,
.sides-2:after {
  content: "";
  position: absolute;
  inset: -3px 0;
  border: 3px solid;
  border-image: linear-gradient(-90deg,#0000 8px,currentColor 0) 3;
  opacity: 0;
  transform: scaleX(var(--s,1)) translate(-25px);
  transition:0s .3s, opacity .3s;
}
.sides-2:after {
  inset: 3px 0;
  --s: -1;
}
.sides-2:hover:before,
.sides-2:hover:after {
  opacity: 1;
  transform: scaleX(var(--s,1)) translate(0);
  transition:.4s,opacity 0.3s;
}

.sides-3 {
  padding: 10px;
}
.sides-3:before,
.sides-3:after {
  content: "";
  position: absolute;
  inset: 0 -40px;
  background: 
    linear-gradient(currentColor 0 0) 0 0,
    linear-gradient(currentColor 0 0) 100% 100%;
  background-size: var(--d,0%) 3px;
  background-repeat: no-repeat;
  opacity: 0;
  transition:0s .3s,opacity .3s;
}
.sides-3:after {
  inset: -40px 0;
  background-position: 100% 0,0 100%;
  background-size: 3px var(--d,0%);
}
.sides-3:hover:before,
.sides-3:hover:after {
  --d: 100%;
  inset: 0;
  opacity: 1;
  transition:.4s,opacity .2s;
}


.sides-4 {
  padding: 10px;
}
.sides-4:before,
.sides-4:after {
  content: "";
  position: absolute;
  inset: 0 -20px;
  border: solid;
  border-width: 0 3px;
  opacity: 0;
  transition:0s .3s, opacity .3s;
}
.sides-4:after {
  inset: -20px 0;
  border-width: 3px 0;
}
.sides-4:hover:before,
.sides-4:hover:after {
  opacity: 1;
  inset: 0;
  transition:.4s,opacity 0.3s;
}

.sides-4:hover:after {
  transition:.4s .2s,opacity 0.3s .2s;
}

.sides-5 {
  padding: 10px;
}

.sides-5:before,
.sides-5:after {
  content: "";
  position: absolute;
  opacity: 0;
  transition:0s .3s,opacity .3s;
}
.sides-5:before {
  inset: 0 -20px 0 0;
  transform: translateX(-20px);
  border-left: 3px solid;
  box-shadow: -3px 0 inset #0000;
}
.sides-5:after {
  inset:0  0 -20px 0;
  transform: translateY(-20px);
  border-top: 3px solid;
  box-shadow:0 -3px inset #0000;
}
.sides-5:hover:before,
.sides-5:hover:after {
  opacity: 1;
  inset: 0;
  transform: translate(0);
}
.sides-5:hover:before {
  box-shadow: -3px 0 inset;
  transition: opacity .3s,transform .3s, box-shadow .3s .6s,inset .3s .6s;
}
.sides-5:hover:after {
  box-shadow:0 -3px inset;
  transition: opacity .3s .3s,transform .3s .3s, box-shadow .3s .9s,inset .3s .9s;
}


.sides-6 {
  padding: 10px;
  box-shadow: 0 0 0 3px inset #0000;
  transition: .3s;
}
.sides-6:hover {
  box-shadow: 0 0 0 3px inset;
  transition: .3s .8s;  
}

.sides-6:before,
.sides-6:after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  border: 3px solid;
  border-image: linear-gradient(currentColor 20px,#0000 0) 3;
  transform: scaleY(var(--s,1)) translateY(-25px);
  transition: 0s .3s, opacity .3s;
}
.sides-6:after {
  --s: -1;
}
.sides-6:hover:before,
.sides-6:hover:after {
  opacity: 1;
  transform: scaleY(var(--s,1)) translateY(0);
  transition: .4s,opacity .3s;
}
.sides-6:hover:after {
  transition: .4s .4s,opacity .3s .4s;
 }


.sides-7 {
  padding: 10px;
}

.sides-7:before,
.sides-7:after {
  content: "";
  position: absolute;
  inset: -30px;
  opacity: 0;
  background: 
    linear-gradient(currentColor 0 0) var(--p,0) 0,
    linear-gradient(currentColor 0 0) var(--p,0) 0,
    linear-gradient(currentColor 0 0) calc(100% - var(--p,0%)) 100%,
    linear-gradient(currentColor 0 0) calc(100% - var(--p,0%)) 100%;
  background-size: 25px 3px,3px 25px;
  background-repeat: no-repeat;
  transition: 0s .3s, opacity .3s;
}
.sides-7:after {
  --p: 100%;
}
.sides-7:hover:before,
.sides-7:hover:after {
  opacity: 1;
  inset: 0;
  transition: .4s,opacity .3s;
}
.sides-7:hover:after {
  transition: .4s .4s,opacity .3s .4s;
 }  


/**/
[class] {
  display:inline-block;
  font-size:40px;
  font-family:sans-serif;
  margin:25px;
  cursor:pointer;
  position: relative;
}
[class]:before,
[class]:after {
  pointer-events: none;
}
body {
  text-align:center;
}