如何在Firefox中为:before伪元素的首行内容设置粗体？

这个问题我之前也碰到过，核心是不同浏览器对伪元素和::first-line的匹配逻辑存在差异，咱们一步步拆解来看：

为什么Firefox不生效？ #

你当前的代码里，[data-text]::first-line是针对宿主<div>元素的第一行设置粗体，但Firefox对设置了display:block的:before伪元素的处理逻辑和Chrome/Edge/IE11不一样：

• Chrome等浏览器会把:before伪元素的内容视为宿主元素文本流的一部分，所以宿主的::first-line能匹配到伪元素里的首行内容；
• 而Firefox会把display:block的:before当作一个独立的块级盒子，和宿主元素的内容是完全分开的两个盒子，因此宿主的::first-line只能匹配自身内部的内容（也就是你写的...），根本碰不到伪元素里的文本。

怎么解决？ #

很简单，直接把::first-line绑定到:before伪元素本身，而不是宿主元素。修改后的代码如下：

CSS代码 #

[data-text]::before { 
  content: attr(data-text); 
  display: block; 
  white-space: pre; 
}
/* 把::first-line直接应用到伪元素上 */
[data-text]::before::first-line { 
  font-weight: bold; 
}

HTML代码 #

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

这样修改后，所有浏览器都会正确识别并把粗体样式应用到:before伪元素的首行内容上——因为我们直接针对伪元素的文本流设置样式，避开了不同浏览器对宿主元素与伪元素盒子关系的差异处理。

内容的提问来源于stack exchange，提问作者Richard Parnaby-King