Углы на блоке (CSS)

.text{ 
  text-transform: uppercase; 
  position: relative; 
  display: inline-flex; 
  padding: 6px; 
  background-color: white; 
} 
.text::after{ 
  content: ''; 
  position: absolute; 
  left: -3px; 
  top: -3px; 
  width: 0; 
  z-index: -1; 
  height: 0; 
  background-color: black; 
} 
.text::before{ 
  content: ''; 
  position: absolute; 
  right: -3px; 
  bottom: -3px; 
  width: 0; 
  z-index: -1; 
  height: 0; 
  background-color: black; 
} 
.text:hover::after, .text:hover::before{ 
  width: 20px; 
  height: 20px; 
}

<h1 class="text">Some text</h1>