如何仅在border-top上使用border-image？

Question

根据屏幕截图，如果线到达措辞部分的中心时如何变得透明？我们可以用css渐变来实现它吗？

＆＃13;

＆＃13;

    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;
	}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;