Create Horizontal Separator with centered text in front of gradient background

Question

I want to create horizontal separator with text in center and in front of gradient background. How to make square blue that contain the text become transparent and comply with gradient background?

here's the code css:

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: #000;
    text-align: center;
    height: 1.5em;
    opacity: .5;
}
.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    color: #000;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #fff;
    background-color: #012533;
}
.hr-text:before {
    content: "";
    background: linear-gradient(90deg,transparent,#fff,transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}

Html

<hr class="hr-text" data-content="OR">

preview:

https://jsfiddle.net/dtxyzhxL/

Answer 1

So you'd like something like this then? https://jsfiddle.net/dtxyzhxL/2/

I don't know if that's what you're after, but that's what I understand from your post that you're after.

Of course there are multiple ways to achieve that and this is just my quick fiddle.

Here's the code:

CSS:

.separator {
    position: relative;
    width: 100%;
}

.hr-left,
.hr-right {
    line-height: 1em;
    position: absolute;
    outline: 0;
    top: 0;
    left: 0;
    border: 0;
    color: #000;
    text-align: center;
    height: 1.5em;
    opacity: .5;
    width: 100%;
}

.hr-left:before {
    content: "";
    background: linear-gradient(90deg,transparent,#fff);
    position: absolute;
    left: 0;
    top: 50%;
    width: 47%;
    height: 2px;
}

.hr-right:before {
    content: "";
    background: linear-gradient(90deg,#fff,transparent);
    position: absolute;
    right: 0;
    top: 50%;
    width: 47%;
    height: 2px;
}

.hr-text {
    position: relative;
    display: block;
    padding: 0 .5em;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    top: .5em;
}

HTML:

<div class="separator">
<hr class="hr-left" />
<span class="hr-text">OR</span>
<hr class="hr-right" />
</div>