Как выделить жирным шрифтом первую строку: перед контентом в Firefox?

Question

Я использую фреймворк, в котором я могу добавлять атрибуты к элементу, но не могу сам добавлять элементы dom. Я пытаюсь добавить две строки содержимого к псевдоэлементу :before, а затем сделать первую строку жирным.

[data-text]::before {
  content: attr(data-text);
  display: block;
  white-space: pre;
}

[data-text]::first-line {
  font-weight: bold;
}

<div data-text="Here's some text.
Here's a new line with more text.">
  ...
</div>

Этот эффект работает именно так, как я хочу, в Chrome, Edge и IE11 (что было шоком), но не в Firefox (также шок). Почему Firefox не выделяет первую строку, в то время как другие браузеры это делают? Как мне получить первую строку жирным шрифтом?

Answer 1

Эй, можешь попробовать вот так;

[data-text]::before {
  content: attr(data-text);
  /*display: block;*/
  white-space: pre;
}

[data-text]::first-line {
  font-weight: bold;
}

<div data-text="Here's some text.
Here's a new line with more text.
">
  ...
</div>