时间戳

首页 > 解决方案 > 如何在 Firefox 中的内容前加粗第一行：

css - 如何在 Firefox 中的内容前加粗第一行：

问题描述

我正在使用一个框架，我可以在其中向元素添加属性，但不能自己添加 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 不加粗第一行而其他浏览器加粗？如何将第一行加粗？

标签： cssfirefox

解决方案

嘿，你可以这样试试吗？

[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>

推荐阅读