Why :: the first line does not work for span, like p / div tags?

Question

I have the code below:

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> 

The problem is that the pseudo-element works for the p tag and changes the first line to the specified color, but the same does not work for the span tag.

Answer 1

By MDN :

The first row has only a value in the container block, therefore the :: first-line pseudo-element affects only elements with the display value of the block, inline block, table or table. In all other cases :: the first row has no effect.

The following is an excerpt from the W3C Spec : ( Section 7.1.1 First Definition of Formatted String in CSS )

In CSS, the :: first-line pseudo-element can only have an effect when attached to a block-like container, such as a block block, inline block, table header, or table cell.

Since span elements are display: inline by default , the ::first-line selector does not affect it. If we change the display on span to inline-block or block , it will work.

 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 states that the :: selector first line only works for block elements. span is an inline element by default, so for this to work, just change the mapping to an inline block or block .