Cut In The Middle Of Border

I'm trying to achieve the border that looks like the image when on hover: I'm not sure how to describe the border. But any ways to achieve this ?

Solution 1:

Using hover with before and after

.text {
  position: relative;
  width: 100px;
  height: 20px;
  text-align: center;
}

.text:hover::before, 
.text:hover::after {
  content: '';
  position: absolute;
  border: 1px solid black;
  border-bottom: 0;
  width:100%;
  left:0;
  height: 20%; 
}

.text:hover::after {
  bottom: 0;
  border: 1px solid black;
  border-top: 0;
}

<div class="text"> Sample </div>

Solution 2:

You can add ::before and ::after selectors with the same background of the div (here, by default, white) to overwrite the border as follows.

.text {
  width: 100px;
  height: 20px;
  text-align: center;
  
  position: relative;
}

.text:hover {
  border: 1px solid black;
}

.text:hover::before,
.text:hover::after {
  content: " ";
  position: absolute;
  background: white;
  top: 5px;
  height: 10px;
  width: 1px;
}

.text::before {
  left: -1px;
}

.text::after {
  right: -1px;
}

<div class="text"> Sample </div>

Solution 3:

A simple border-image can do the trick

.text {
  display:inline-block;
  padding:10px;
  text-align: center;  
  font-size:25px;
  border:2px solid transparent;
}

.text:hover {
  border-image: linear-gradient(#000 30%, transparent 0 70%,#000 0) 2;
}

<div class="text"> Sample </div>