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

Question

As per screenshot, how if the line become transparent when reach the center of wording part? can we use css gradient to achieve it?

enter image description here

    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>

@Sachin I am very much sure, this is what conmen wanted. It would be really great to post it as a separate answer and explained what you did in it. Thanks — YourFriend, Apr 30 '15 at 12:02

score 1 · Accepted Answer · answered Apr 30 '15 at 11:58

Well, this is not my answer. I'm just adding code snippet of solution given by @Sachin in comment section of question.

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>

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

1 Answers1