Can't make hr:before tag alignment center with css

I cannot get this hr:before tag to be align with the center sothat if a user expands or decreased the width, the box will move with it.  Using left: 25% at least shows me that the box can move independently of the hr tag.  I've tried <div> but the hr:before just disappears. I've tried flexbox and every other thing i've seen on the web.  I would prefer not to have to create an image just to separate page content.  Does anyone have any thoughts or even a better way to do this.  Photo attached and as always thanks in advance.

<style>
.sqs-block-horizontalrule 
  hr {
    background-color: #555;
    border: none;
    display: block;
    height: 4px;
    overflow: visible;
    position: relative;
    width: 100%;
}

hr:before {
    background-color: #8EB6DC;
    content: '';
    display: block;
    height: 8px;
width: 20%;
  left: 25%;
    position: absolute;
    top: -2px;
    z-index: 1;
}
<hr></style>

site url pls?

moecritiques.com pw 2024 go to test page. 

I've removed all CSS for the time being to test but the code for the above requested is on the test page.  Thank you in advance.