如何在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>