中间带文本字和伪元素渐变图案的水平线(CSS)[重复]

Question

我试图找到一个中间有文字的渐变水平线的解决方案。

大多数解决方案要么针对带有文本的水平线，要么针对渐变线，但不是同时针对两种情况。我找不到任何解决方案，我得到的最接近的方法是如何创建带有文本的水平线:https://stackoverflow.com/a/29105358/9160753

经过一些进一步的实验，我能够创建所需的解决方案，并愿意与您分享，以防其他人需要它。

希望有帮助！

Answer 1

解决方案见下文。注意，您当然可以去掉margin-top元素。

null

.text {
     margin-top:50px;
     display:flex;
}

.text:before, .text:after {
     content:'';
     flex:1;
     margin: auto 0.5rem;
     height: 1px;
}

.text:before {
     background:linear-gradient(to right, #fff 0px, #bdbdbd 100%); 
}

.text:after {
     background:linear-gradient(to left, #fff 0px, #bdbdbd 100%); 
}

    <span class="text">Your Text</span>