css - 如何仅在边框顶部使用边框图像？

Question

根据屏幕截图，如果线条到达文字部分的中心时变得透明怎么办？我们可以使用css渐变来实现吗？

    h2.section-title {
		font-size: 34px;
		font-weight: 400;
		text-transform: uppercase;
	}
	.section-divider h2 {
		display: inline-block;
		padding: 1rem;
		position: relative;
		top: -5rem;
		background-color: transparent;
	}
	.section-divider {
		border-top: 1px solid #fff;
		
		margin-top: 4rem;
		margin-bottom: 0;
		text-align: center;
	}

<div class="section-divider">
     <h2 class="text-center section-title" lang="en">Highlights</h2>
</div>

Answer 1

好吧，这不是我的答案。我只是在问题的评论部分添加@Sachin 给出的解决方案的代码片段。

h1 {
    position: relative;
    font-size: 30px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
}
h1:before, h1:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: red;
}
h1:before {
    margin-left: -50%;
    text-align: right;
}
.color {
    background-color: #ccc;
}

<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>