CODEWITHSUNDEEP
csscss-selectorspseudo-element
Dimitry
Dimitry

Reputation: 5

::before and ::first-line don't work right correctly

MDN says:

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

But when i write this:

p::before {content: 'Red text'; display: block;}
p::first-line {color: red;}
<p>This text shouldn't be red</p>

it doesn't work in Firefox (word 'Hello' isn't red). What's wrong with this one?

Upvotes: 0

Views: 592

Answers (1)

user11969551
user11969551

Reputation:

What's wrong with this one?

Simply put, there is no problem with this behavior. Firefox's behavior is also correct based on the specifications.

The behavior of the ::first-line pseudo-element when the first line is the ::before, ::after pseudo-element is selectively shown in the specification[1]. So it's no wonder that all browsers don't behave consistently.

§ 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.

Also, the behavior when applying the style is as written in Selectors Level 3, which matches the behavior of Google Chrome[2]. And if you don't apply styles to the matching elements, it works like 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.

As an example, Google Chrome and Firefox differ in whether the ::first-line pseudo-element decoration is applied to the ::before and ::after pseudo-elements.

Question code behavior in Google Chrome

It turns out that the part which hits the first line among the characters shown in the question sentence turns red.

Question code behavior in Firefox

It can be seen that the part corresponding to the first line of the characters shown in the question sentence is not red.

To do the same with Google Chrome in Firefox, you can apply the color property to the ::before pseudo-element, as @Ravi wrote in the comment in the question text.

p::before {
  content: 'Red text';
  display: block;
  color: red;
}
<p>This text should be red</p>

Upvotes: 2

Related Questions