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

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/

我不知道这是否是您所追求的，但这就是我从您的 post 中了解到您所追求的。

当然有多种方法可以实现，这只是我的快速 fiddle。

代码如下：

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>

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

Create Horizontal Separator with centered text in front of gradient background

html

css

separator