在渐变背景前创建带有居中文本的水平分隔符

Question

我想创建水平分隔符，文本位于渐变背景的中央和前面。如何使包含文本的方形蓝色变得透明并符合渐变背景？

这是代码 的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">

预览：

https://jsfiddle.net/dtxyzhxL/

Answer 1

那么你想要这样的东西呢？ https://jsfiddle.net/dtxyzhxL/2/

我不知道这是不是你所追求的，但这就是我从你的帖子中了解到你所追求的。

当然，有多种方法可以实现这一点，这只是我的小提琴。

以下是代码：

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>