Multiple Pseudo-elements

Several pseudo-elements can also be combined. In the following example, the first letter of a paragraph will be red, 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 the default font size and color:

HTML file: Displayed by browser:
<style>
p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}
p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}
</style>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>

You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the first letter and the first line of a text!

Back button Table of Contents Next button