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

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>

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

How to use border-image on border-top only?

css

border-image