Inline element with flexible border width

Question

I'm trying to create a visual effect to an inline element, this is what I want

But using inline elements I can't figure out how to make that red line above the title flexible, this is what I got so far: https://jsfiddle.net/1oLzzw6t/

<div><span class="info-w option1"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div>
<div><span class="info-w option2"><span class="info"><span>Batman vs Superman – O Coringa e o Charada quase apareceram no filme!</span></span></span></div>

body{
  padding: 5%;
  background: black;
}

.info-w{
  padding-right: 10%;
  position: relative;
  z-index: 1;
  .info{
    float: left;
    font-family: Helvetica;
    font-size: 24px;
    line-height: 1.2;
    font-weight: bold;
    color: black;
    >span{
      display: inline;
      background: #FFF;
      position: relative;
    }
  }
  &.option1{
    .info{
      >span{
        border-top: 3px solid red;
      }
    }
  }
  &.option2{
    .info{
      box-shadow: 0 -3px 0 red;
    }
  }
}

Someone can help me?

Answer 1

You can use the ::first-line` pseudo-element and apply the box-shadow to that.

MDN Reference

The ::first-line CSS pseudo-element applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the element, width of the document, and the font size of the text. As all pseudo-elements, ::first-line does not match any real HTML element.

p {
  display: inline-block;
  font-size: 24px;
  font-weight: bold;
  width: 80%;
}
p::first-line {
  box-shadow: 0 -3px 0 red;
}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla numquam illum error unde amet atque, quasi debitis hic deserunt laboriosam!</p>

Note:

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.