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.
::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 .
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.
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.
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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With