Loading lesson path
Concept visual
Start from A
Formula
Pseudo - elements for text, allow you to style specific parts of text content, such as the first line or first letter.Formula
::first - line pseudo - element is used to add a special style to the first line of a text.Formula
::first - line pseudo - element can only be applied to block - level elements.Formula
Format the first line of text in all < p >elements:
Formula
p::first - line{
color: red;
font-variant: small-caps;
font-size: 19px;
}Formula
::first - letter pseudo - element is used to add a special style to the first letter of a text.Formula
::first - letter pseudo - element can only be applied to block - level elements.Formula
Format the first letter of the text in all < p >elements:
Formula
p::first - letter{
color: red;
font-size: xx-large;
}Formula
Pseudo - elements can easily be combined with HTML classes.Formula
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%;
}Formula
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:
{
color: red;
font-size: xx-large;
}Formula
p::first - line{
color: blue;
font-variant: small-caps;
}