css - Firefox で 2 行のテキストの末尾に ::after 要素を配置する

Question

2 行にまたがるテキストの末尾に after 要素を配置したい。

これは Safari と Chrome では機能しますが、Firefox では機能しません。

これを解決する方法について誰かアドバイスはありますか?

青い線は、「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>