css - 如何加粗:before content in 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>