JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  border-radius: 2px;
  height: 2px;
  
  display: block;
  
  content: "";
  flex: 1;
  
  width: 100%;
}

div:after {
  background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

h1 {
  text-align: center;
  
  margin: 8px;
}