Pseudo-elements for Text
Pseudo-elements for text, 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
p::first-line {
color: red;
font-variant: small-caps;
font-size: 19px;
}Live preview
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
p::first-letter {
color: red;
font-size: xx-large;
}Live preview
Pseudo-elements and HTML Classes
Pseudo-elements can easily be combined with HTML classes.
Example
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}Live preview
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;
}Live preview