::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

Next lesson: ::selection

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies