How to format the title correctly?

Question

css

Good afternoon!
I ask for help from those who can provide it)
The question is this: on the main page of the site, each block is preceded by a heading, i.e.
There is a header block. So each heading should be framed on both sides with horizontal stripes - clearly in the middle of the heading.

I implemented this with :before and :after

.dopline-content::before {
  background: #848484 none repeat scroll 0 0;
  content: "";
  height: 1px;
  left: 15px;
  position: absolute;
  top: 20px;
  width: 230px;}

.dopline-content::after {
  background: #848484 none repeat scroll 0 0;
  content: "";
  height: 1px;
  right: 15px;
  position: absolute;
  top: 20px;
  width: 230px;}

But it doesn't work very well... Especially when the headings are of different lengths. Plus, when the screen is reduced (for example, on a tablet), it turns out to be horrible ...
I can’t figure out how to implement it differently - so that it’s beautiful on the desktop, and it’s correct when adapting.
Something like that.
Dear gurus! Please tell me the best way to do this.
Thanks in advance for any help and a kick in the right direction.

Answer 1

Try like this

<div class="strike">
    <span>Hello World</span>
</div>

.strike {
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap; 
    }

    .strike > span {
        position: relative;
        display: inline-block;
    }
  
    .strike > span:before,
    .strike > span:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 9999px;
        height: 1px;
        background: red;
    }

    .strike > span:before {
        right: 100%;
        margin-right: 15px;
    }

    .strike > span:after {
        left: 100%;
        margin-left: 15px;
    }

EXAMPLE
https://jsfiddle.net/miha8722/n3hmk70x

Answer 2

Alternatively, make the line a gradient. code pen