:: before和:: first-line无法正常工作

Question

MDN说：

  

:: first-line CSS伪元素将样式应用于块级元素的第一行。

但是当我写这篇文章时：

p::before {content: 'Red text'; display: block;}
p::first-line {color: red;}

<p>This text shouldn't be red</p>

它在Firefox中不起作用（单词“ Hello”不是红色）。这是怎么了？

Answer 1

  

这是怎么了？

简单地说，此行为没有问题。根据规范，Firefox的行为也是正确的。

---

在第一行是::first-line，::before伪元素时，::after伪元素的行为在规范中有选择地显示。 ^{[1] < / sup>。因此，难怪所有浏览器的行为都不一致。}

  

§4.1。生成的内容伪元素：:: before和:: after ^[1]

     

与常规元素的内容一样，生成的::before和::after伪元素的内容可以包含在应用于以下元素的任何::first-line和::first-letter伪元素中它的原始元素。

此外，应用样式时的行为与Selectors Level 3（选择器级别3）中的规定相同，该行为与Google Chrome ^[2] 的行为匹配。而且，如果您不将样式应用于匹配的元素，它的工作方式类似于Firefox。

  

7.4。 :: before和:: after伪元素 ^[2]

     

::before和::after伪元素可用于描述元素内容之前或之后的生成内容。它们在CSS 2.1 [CSS21]中进行了解释。

     

将::first-letter和::first-line伪元素应用于具有使用::before或::after生成的内容的元素时，它们将应用于元素的第一个字母或第一行元素，包括生成的内容。

例如，Google Chrome和Firefox在::first-line和::before伪元素上是否应用::after伪元素修饰方面有所不同。

在Google Chrome浏览器中的问题代码行为

Firefox中的问题代码行为

---

要在Firefox中使用Google Chrome进行同样的操作，可以将color属性应用于::before伪元素，如问题文本中的@Ravi wrote in the comment。

p::before {
  content: 'Red text';
  display: block;
  color: red;
}

<p>This text should be red</p>