Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 611
CodeWithCoffee Avatar asked Feb 23 '16 12:02

CodeWithCoffee


People also ask

Can I use :: first letter on span?

::first-letter does not work on inline elements such as a span . ::first-letter works on block elements such as a paragraph, table caption, table cell, list item, or those with their display property set to inline-block . Therefore it's better to apply ::first-letter to a p instead of a span .

Can we use P tag inside span?

HTML <span> TagIt is often used inside a <p> element to apply styles to a specific part of a paragraph. For instance, you could use <span> to change the color of a word in a paragraph.

What is difference between SPAN tag and P tag?

span is an in-line element and "p" is a block element. If you are not sure what are inline elements and block elements. and inline elements on the other hand takes as much space as they need. Notice, when you change the display property how background color behaves.

What is difference between span and div tag?

Span and div are both generic HTML elements that group together related parts of a web page serving different functions. <div> is a block-level element and <span> is an inline element.


2 Answers

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>
like image 121
Harry Avatar answered Sep 28 '22 02:09

Harry


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.

like image 37
Cosmin Ababei Avatar answered Sep 28 '22 02:09

Cosmin Ababei