我试图找到一个中间有文字的渐变水平线的解决方案。
大多数解决方案要么针对带有文本的水平线，要么针对渐变线，但不是同时针对两种情况。我找不到任何解决方案，我得到的最接近的方法是如何创建带有文本的水平线:https://stackoverflow.com/a/29105358/9160753
经过一些进一步的实验，我能够创建所需的解决方案，并愿意与您分享，以防其他人需要它。
希望有帮助！
解决方案见下文。注意，您当然可以去掉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>