CSS Text Pseudo-elements
Text Pseudo-elements
Text pseudo-elements allow you to style specific parts of text content, such as the first line or first letter.
The CSS ::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style
to the first line of a text.
Note: The
::first-line pseudo-element can only be applied to block-level
elements.
Example
Format the first line of text in all <p> elements:
p::first-line
{
color: red;
font-variant: small-caps;
font-size: 19px;
}
Try it Yourself »
The CSS ::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
Note: The
::first-letter pseudo-element can only be applied to block-level
elements.
Example
Format the first letter of the text in all <p> elements:
p::first-letter
{
color: red;
font-size: xx-large;
}
Try it Yourself »
Pseudo-elements and HTML Classes
Pseudo-elements can easily be combined with HTML classes.
Example
Display the first letter of <p> elements with class="intro", in red and in a larger size:
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Try it Yourself »
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of <p> elements will be red and in an xx-large font size. The rest of the first line will be blue and in small-caps. The rest of the paragraph will be in the default font size and color:
Example
p::first-letter
{
color: red;
font-size: xx-large;
}
p::first-line
{
color: blue;
font-variant: small-caps;
}
Try it Yourself »
