I need to decorate some pretty big multiline headlines with a thick border above them.
The border should always be as long as the longest line in the text block, but no longer than that.
Here's an image to illustrate what it should look like:
[![enter image description here](https://i.stack.imgur.com/sZ2ZE.png)](https://i.stack.imgur.com/sZ2ZE.png)

I found a whole bunch of question that address similar issues, but nothing that quite fit my problem.

So far I've tried different approaches, which can be found in the fiddle below.

* Set the headline to `inline-block` and adding a top border or :before element, which works perfectly for single-line headlines, but as soon as the text wraps, the inline-block element expands to 100% width and the border ends up too long. (corresponds to the yellow & red borders in the fiddle)
* Wrapped the text in a span, setting the span relative and tried to absolutely position a border. This worked well when the last line of text is the longest, but when the last line was shorter than the ones before, the border ends up too short. (corresponds to the blue borders in the fiddle)
* Add border-top on the inline-element, which of course results in borders on all lines of text. Something like the `:first-line` pseudo-class might help here, but I couldn't find anything like that.

I also tried fiddling around with setting `display: inline-block;` and settings `width: max-content` or `width: fit-content`, but those only worked for my problem when I manually added line-breaks, not when the text wrapped on its own.

<https://jsfiddle.net/rj8k2tmg/56/>

```css
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;
}
```

```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>
```