CODEWITHSUNDEEP
htmlcsscss-selectorspseudo-element
CodeWithCoffee
CodeWithCoffee

Reputation: 1904

Why is ::first-line not working for span like p / div tags?

I have the below 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>

Issue is that the pseudo-element is working for p tag and changed first line to specified color but the same is not working for span tag.

Upvotes: 7

Views: 7005

Answers (2)

Harry
Harry

Reputation: 89760

As per MDN:

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Below is the extract from the W3C Spec: (Section 7.1.1 First formatted line definition 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 box, inline-block, table-caption, or table-cell.

Since span elements are display: inline by default the ::first-line selector has no effect on it. If we change the display for the 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>

Upvotes: 10

Cosmin Ababei
Cosmin Ababei

Reputation: 7072

The documentation states that ::first-line selector only works for block elements. span is by default an inline element so in order for this to work, simply change the display to inline-block or block.

Upvotes: 3

Related Questions