Warum funktioniert :: first-line nicht für Span wie p/div Tags?

Question

Ich habe den folgenden Code:

p::first-line { 
 
    color: #ff0000; 
 
    font-variant: small-caps; 
 
} 
 
span::first-line { 
 
    color: #ff0000; 
 
    font-variant: small-caps; 
 
}

<span> This is to check span.This is to check spanThis is to check spanThis  is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span> 
 

 
<p>This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.</p>

Problem ist, dass das Pseudoelement arbeitet für p Tag und veränderte erste Zeile angegeben Farbe, aber die gleiche Arbeit ist nicht für span Tag.

Answer 1

Wie pro MDN:

Eine erste Zeile hat nur Sinn in einem Block-Behälterkasten, damit die :: Erstlinientherapie pseudo-Element hat nur eine Wirkung auf die Elemente mit einem Anzeigewert des Blocks, Inline-Block, Tabellenzelle oder Tabellenbeschriftung. In allen anderen Fällen hat :: first-line keine Wirkung.

Unten ist der Auszug aus dem W3C Spec: (Abschnitt 7.1.1 Erste formatiert Liniendefinition in CSS)

In CSS, die :: first-line pseudo-Element kann nur eine haben Effekt, wenn er an einen blockartigen Container wie eine Blockbox, einen Inline-Block, eine Tabellenbeschriftung oder eine Tabellenzelle angehängt wird.

Seit span elements are display: inline by default der ::first-line Selektor hat keine Auswirkungen darauf. Wenn wir die display für die span zu inline-block oder block ändern, wird es funktionieren.

p::first-line { 
 
    color: #ff0000; 
 
    font-variant: small-caps; 
 
} 
 
span::first-line { 
 
    color: #ff0000; 
 
    font-variant: small-caps; 
 
} 
 
span.block { 
 
    display: block; 
 
} 
 
span.inline-block { 
 
    display: inline-block; 
 
}

<h3>Default Span</h3> 
 
<span> This is to check span.This is to check spanThis is to check spanThis  is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span> 
 

 
<h3>Span with display as block</h3> 
 
<span class='block'> This is to check span.This is to check spanThis is to check spanThis  is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span> 
 

 
<h3>Span with display as inline-block</h3> 
 
<span class='inline-block'> This is to check span.This is to check spanThis is to check spanThis  is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check spanThis is to check span</span> 
 

 
<p>This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.This is to check p.</p>

Answer 2

The documentation besagt, dass :: first-line Selektor funktioniert nur für Blockelemente. Spanne ist standardmäßig ein inline Element so dafür zu arbeiten, um einfach die Anzeige zu ändern, um inline-block oder Block.