Вёрстка исчезающей линии

.text { 
  font-family: arial; 
  font-size: 13px; 
  font-weight: 700; 
  color: #027abe; 
} 
 
hr { 
  height: 2px; 
  margin: 0; 
  border: 0; 
  background: linear-gradient(to right, #027abe 0%, transparent 100%); 
}

<div class="text">Main content listing header.</div> 
<hr>

.text { 
  font-family: arial; 
  font-size: 13px; 
  font-weight: 700; 
  color: #027abe; 
  border-bottom-width: 2px; 
  border-style: solid; 
  border-image: linear-gradient(to right, #027abe 0%, transparent 100%) 1; 
  border-top:0; 
  border-left:0; 
  border-right:0; 
}

<div class="text">Main content listing header.</div>