css -::before 和::first-line 不能正常工作

Question

MDN 说:

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element.

但是当我写这个的时候:

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

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

它在 Firefox 中不起作用(“你好”一词不是红色的)。这个有什么问题吗？

Answer 1

What's wrong with this one?

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

---

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

§ 4.1. Generated Content Pseudo-elements: ::before and ::after^[1]

As with the content of regular elements, the generated content of ::before and ::after pseudo-elements may be included in any ::first-line and ::first-letter pseudo-elements applied to its originating element.

此外，应用样式时的行为如 Selectors Level 3 中所写，与 Google Chrome 的行为相匹配 ^[2] 。如果您不将样式应用于匹配元素，它的工作方式与 Firefox 类似。

7.4. The ::before and ::after pseudo-elements^[2]

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element’s content. They are explained in CSS 2.1 [CSS21].

When the ::first-letter and ::first-line pseudo-elements are applied to an element having content generated using ::before or ::after, they apply to the first letter or line of the element including the generated content.

例如，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>