Align an ::after element at the end of a two-line text in Firefox

Question

I want to align an after element at the end of a text that runs over two lines.

This works in Safari and Chrome, but not in Firefox.

Does anyone have any advice on how I can solve this?

The blue line should be right after the word headline, like "headline _".

p.subtitle {
  color: #F94922;
  font-size: 30px;
  display: inline;
  font-weight: 300;
  position: relative;
  line-height: 1.1;
}

p.subtitle::after {
  content: "";
  background: #002C5A;
  border-radius: 10px;
  display: block;
  right: -66px;
  bottom: 2px;
  width: 50px;
  height: 6px;
  position: absolute;
}

<div class="subtitlewrap">
  <p class="subtitle">This is a long <br />headline</p>
</div>