Pseudo-elements for Text
Parts of a text, such as its first line or first letter, can be styled on their own with text pseudo-elements.
The CSS ::first-line Pseudo-element
To give the first line of a text a special style, use ::first-line.
Note: Only block-level elements accept ::first-line.
Example
Every <p> element here gets a formatted first line of text.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::first-line Pseudo-element</title>
<style>
p::first-line {
color: red;
font-variant: small-caps;
font-size: 19px;
}
</style>
</head>
<body>
<h2>The ::first-line Pseudo-element</h2>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some more text. And even more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>
</html>
The CSS ::first-letter Pseudo-element
To give the first letter of a text a special style, use ::first-letter.
Note: Only block-level elements accept ::first-letter.
Example
Every <p> element here gets a formatted first letter.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::first-letter Pseudo-element</title>
<style>
p::first-letter {
color: red;
font-size: xx-large;
}
</style>
</head>
<body>
<h2>The ::first-letter Pseudo-element</h2>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>
Pseudo-elements and HTML Classes
Pseudo-elements pair easily with HTML classes: put the class in the selector alongside the pseudo-element.
Example
In <p> elements with class "intro", the first letter is red and in a larger size.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-element with Class</title>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<h2>Pseudo-elements and HTML Classes</h2>
<p class="intro">This paragraph has the "intro" class. The first letter is red and larger.</p>
<p>This paragraph does not have the "intro" class. The first letter is not styled.</p>
</body>
</html>
Multiple Pseudo-elements
One element can also take several pseudo-elements at once.
Example
Each part of a <p> element looks different here. Its first letter is red and xx-large, the remainder of its first line is blue and in small-caps, and everything after that keeps the default font size and color.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Pseudo-elements</title>
<style>
p::first-letter {
color: red;
font-size: xx-large;
}
p::first-line {
color: blue;
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Multiple Pseudo-elements</h2>
<p>The first letter of this paragraph is red and in an xx-large font size. The rest of the first line is blue and in small-caps. The rest of the paragraph will be in the default font size and color. Some more text to demonstrate multiple lines being used in the paragraph so you can see the difference.</p>
</body>
</html>