::first-letter and ::first-line
Learn ::first-letter and ::first-line pseudo-elements.
What is ::first-letter?
The ::first-letter pseudo-element grabs the first letter of a block element and gives it a special style. p::first-letter { font-size: 3rem; } shows the leading letter of every paragraph three times larger.
The pseudo-element cares only about the visible first letter; how the tag begins does not matter. A quote mark, a number, or a space — the browser still finds the first letter. It is a common ornament in magazine and newspaper layouts.
::first-line and the drop cap
The ::first-line pseudo-element grabs the first line of a block; its length changes with the screen width. p::first-line { text-transform: uppercase; } upper-cases the first line.
Together these two pseudo-elements build the drop cap ornament known from newspapers: ::first-letter enlarges the leading letter and floats it left so the text wraps around. It is a classic magazine look.
Exercise Enlarge the leading letter as a drop cap
Add a ::first-letter pseudo-element to the p type selector. Inside, set font-size: 3rem, float: left, and color: navy. This is the classic drop cap ornament that enlarges a paragraph's first letter.
Show example solution
/* add a drop cap to the paragraph */
p::first-letter {
font-size: 3rem;
float: left;
color: navy;
}Test yourself
-
What does ::first-letter target?
p::first-letter { font-size: 3rem; }- The first letter of a block element
- All letters in an element
- The first element on the page
- Only the first line of paragraphs
Show answer
The first letter of a block element — Correct. ::first-letter styles the visible first letter of a block element.
-
Write the p::first-letter block
____ { font-size: 3rem; float: left; }Show answer
p::first-letter { font-size: 3rem; float: left; } -
Match each pseudo-element to its target
- ::first-letter
- First letter
- ::first-line
- First line
- ::before
- Box before content
- ::after
- Box after content