решено: выровнять элемент :: after в конце двухстрочного текста в Firefox

Question

Я хочу выровнять элемент после в конце текста, который состоит из двух строк.

Это работает в Safari и Chrome, но не в Firefox.

Кто-нибудь есть какие-либо советы о том, как я могу решить это?

Синяя линия должна быть сразу после слова заголовка, как "заголовок _".

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>