JSFiddle - React, Tailwind, and code Playground

HTML

<p class="block-title">
  <span>Заголовок</span>
</p>

<p class="block-title">
  <span>Lorem ipsum dolor sit amet,</span>
</p>

SCSS

.block-title{
  overflow: hidden;
  text-align: center;
  border:1px solid black;
  
  span {
    position: relative;
    display: inline-block;
    border:1px solid black;
    
    &::before, &::after {
      content: '';
      width: 50vw;
      background: red;
      position: absolute;
      top: 50%;
      height: 4px;
      margin-top: (4px / -2);
    }
    &::before { right: 100%; }
    &::after { left: 100%; }
  }
}