Как подобное реализуется? html

.black { 
  font-size: 20px; 
  background-color: #000; 
  color: #fff; 
  text-align: center; 
  position: relative; 
} 
.black::after { 
  height: 1px; 
  position: absolute; 
  width: 100%; 
  content: ""; 
  top: 50%; 
  left: 0; 
  background: #fff; 
} 
.black span { 
  background-color: #000; 
  padding: 0 10px; 
  z-index: 1; 
  position: relative; 
}

<div class="black"><span>Нужно больше текста!!!</span> 
</div>