JSFiddle - React, Tailwind, and code Playground

HTML

<p>Before Element on headline, doesn't fit when text wraps</p>
<h1 class="headline">
  Short headline
</h1>

<h1 class="headline">Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd</h1>


<h1 class="headline">Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.</h1>

<hr>

<p>Works fine for cases 1 and 2, but not for case 3 where the second line is shorter.</p>

<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
     Short headline
  </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
    Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd
    </span>
</h1>


<h1 class="headliner__w-wrapper">
  <span class="headline__wrapper">
    Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.
    </span>
</h1>

<hr>

<p>Border-top on inline-wrapper / Adds border on all lines</p>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
     Short headline
  </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
    Long headline that wraps, first&nbsp;line&nbsp;shorter&nbsp;than&nbsp;the&nbsp;2nd
    </span>
</h1>

<h1 class="headliner__w-wrapper">
  <span class="headline__inline-border">
    Long&nbsp;headline&nbsp;that&nbsp;wraps, the 2nd line should be shorter.
    </span>
</h1>

SCSS

body {
  width: 700px;
}

h1 {
  font-family: sans-serif;
	margin-top: 0.75em;

	position: relative;
	max-width: max-content;

	text-transform: uppercase;
}

.headline {
  &:before {
		content: '';
		display: block;
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		border: 0;
		border-top: 4px solid red;
	}
}


.headline__wrapper {
  display: inline;
  position: relative;
}

.headline__wrapper:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  border: 0;
  border-top: 4px solid blue;
}

.headline__inline-border {
  border-top: 4px solid green;
}